ページトップやページ内リンクを設置する際にプラスしたい定番のスムーススクロール。
アンカーリンクをクリックすると移動先までするするーっと移動してくれる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のオプションを追記します。
数値を変更して自分の好みの速さに変えてみてください。