制作のご相談はこちら
ページ内リンクをなめらかに移動するsmooth-scroll.jsの設置方法

公開日 : 2018年10月22日

ページ内リンクをなめらかに移動するsmooth-scroll.jsの設置方法


ページトップやページ内リンクを設置する際にプラスしたい定番のスムーススクロール
アンカーリンクをクリックすると移動先までするするーっと移動してくれるscriptです。
今回はそのsmooth-scroll.jsの設置方法をメモします。

ファイルのダウンロード

GitHubにアクセスし、画面右側の緑のボタン「Clone or download」>「Download ZIP」を押すとファイルがダウンロードされます。

ダウンロードしたsmooth-scroll-masterフォルダの中から「dist」>「smooth-scroll.min.js」を使用します。
非モダンブラウザに対応させる場合は「smooth-scroll.polyfills.min.js」を使用してください。

HTML

<a data-scroll href="#alink">アンカーリンク</a>
...
<div id="alink">コンテンツ</div>
...
<script src="js/smooth-scroll.min.js"></script>
<script src="js/script.js"></script>

aタグにdata-scrollを付与します。複数ページ内リンクがある場合はそれぞれのaタグに追記する必要があるので見落としに注意。
smooth-scroll.min.jsのパスは適宜変更してください。

Javascript

var scroll = new SmoothScroll('a[href*="#"]');

script.jsにこのトリガーを記述します。これでスムーススクロールが動くようになります。
その他オプションを付けたい場合はこのコードに追記することになります。

ヘッダー固定をする場合のオプション

<header data-scroll-header>ヘッダー</header>

固定したいヘッダーにdata-scroll-headerを付与します。

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

Javascriptにこのようにヘッダー固定用のオプションを追記します。

スクロールスピードを変更する場合のオプション

var scroll = new SmoothScroll('a[href*="#"]',{
  speed:1000
});

Javascriptにspeedのオプションを追記します。
数値を変更して自分の好みの速さに変えてみてください。