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

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

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

sample.js

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

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

sample.js

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

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

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

$('セレクタ')

• 指定したセレクタのオブジェクトが得られます。

.offset()

• ドキュメント上での表示位置を取得します。簡単にいうとウィンドウの左上を基準とした位置が得られます。

.top

• .offset()にはtopとleftが入っています。

ここまでで、

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

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

• 最後に。

$("html,body").animate({scrollTop:数字});

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