【ページ内リンク】スムーススクロールを実装できるsmooth-scroll.js使い方 【v14.2.1】

このjsはページ内リンクをスムーススクロールにするjsです。

jQueryがなくても動きますがこの記事にはjQueryを使用した記述が一部あります。

スムーススクロールを実装できるsmooth-scroll.js使い方

読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/14.2.1/smooth-scroll.min.js"></script>

ページ内リンク設定

以下のようにhtmlにリンクとリンク先を記述

<a href="#link">リンク</a>

<p id="link">リンク先</p>

実行

以下のように記述[data-scroll]は無くても動きます。
offsetはスムーススクロール後の上の余白です。
※50なら上に50pxの余白

var scroll = new SmoothScroll('a[href*="#"], [data-scroll]',{
  offset: 50
});

以上、すごく簡単に実装できます!

オプションは他にもいっぱいあるのでご確認ください!

スマホとPCでoffsetを変える

スマホとPCでスムーススクロール後の上部の余白を変えたい場合があると思います。
下記のように実装できます。
例:ブレイクポイント768px スマホで50px PCで30pxのoffset
※jQueryを使用しています

//windowサイズでモバイル判定
var isMobile = function(size){
  return $(window).width() <= size ? true : false
}

var scroll = new SmoothScroll('a[href*="#"], [data-scroll]',{
  offset: isMobile(768) ? 50 : 30
});