たった1行!jQueryで指定箇所までアニメーションつきで自動スクロールさせる方法

More than 1 year has passed since last update.

 jQueryで指定したセレクタの箇所まで自動でスクロールする方法を紹介します。

次のように1行で書くことができます。

sample.js
$("html,body").animate({scrollTop:$('セレクタ').offset().top});

たとえばheaderのidをheaderとしたならば

sample.js
$("html,body").animate({scrollTop:$('#header').offset().top});

を呼んであげるだけでheaderまで自動でスクロールしてくれます。

この1行を少し分割して説明します。

$('セレクタ')
  • 指定したセレクタのオブジェクトが得られます。
.offset()
  • ドキュメント上での表示位置を取得します。簡単にいうとウィンドウの左上を基準とした位置が得られます。
.top
  • .offset()にはtopとleftが入っています。

ここまでで、

$('セレクタ').offset().top

で指定したセレクタの上からの位置が数字で取得できます。

  • 最後に。
$("html,body").animate({scrollTop:数字});

で数字の位置までアニメーションをしながら自動でスクロールします。
数字が0ならば一番上まで戻る、ということもできます。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.