jQueryでスクロールダウンを導入してみた

ボタンを押した際に同じページ内で指定の場所にスクロールするやり方を実装してみました!

スクロールダウンの方法

今回はid名buttonを押した際にid名header部分にスクロールするように指定してみる

//変数を指定する
var header = $('#header').offset().top;

//id名buttonをクリックした際の関数を指定する
$('#button').click(function(){
  $('html,body').animate({
  {
    scrollTop: header
 }
)};

解説

.offset()ってなんぞや？となると思うので、自分はなりました笑
.offsetとは指定した要素のドキュメントの左上からのy軸方向の距離を取得する。
つまり今回の例で言うとid名headerの位置をドキュメントから見てのy軸の距離を取得したという事になります。そしてその取得した値を変数headerに代入したと言う事になります。