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ならば一番上まで戻る、ということもできます。