スムーススクロールさせる方法

今回は、jQueryを利用したスムーススクロールさせる方法を紹介していきます。
#スムーススロールとは
ヘッダーのメニューやトップへ戻るボタンなどをクリックした際に、ページ内のリンク先へ瞬時に飛ぶのではなく、ゆったり飛んでいく挙動です。
#jQueryに記述

javascript

// #から始まるURLがクリックされた時
jQuery('a[href^="#"]').click(function() {
  // 移動速度を指定（ミリ秒）
  let speed = 300;
  // hrefで指定されたidを取得
  let id = jQuery(this).attr("href");
  // idの値が#のみだったらターゲットをhtmlタグにしてトップへ戻るようにする
  let target = jQuery("#" == id ? "html" : id);
  // ページのトップを基準にターゲットの位置を取得
  let position = jQuery(target).offset().top;
  // ターゲットの位置までspeedの速度で移動
  jQuery("html, body").animate(
    {
      scrollTop: position - $( '#js-header' ).outerHeight()　//htmlのheaderにid="js-header"
  },
    speed
  );
  return false;
});
  //wow
  new WOW().init()

上記の記述によって、スムーススクロールを実現できます！