固定ヘッダも考慮してページ内リンクをスクロールさせる「smooth-scroll.js」
LPなどで見かけるページ内リンクのスムーススクロール。簡単に実装でき、気が利いている感も出るのでよく使います。もちろん、ユーザーがページ内での現在地を見失ったりしたいよう、ユーザビリティも考慮していますが。ただ、そのページのヘッダが固定されていたりすると結構面倒。ヘッダの下にリンク先のコンテンツが隠れてしまったり・・・
今回紹介するsmooth-scroll.jsは、悩ましい固定ヘッダのことも考慮された素晴らしいスムーススクロールのjsです。
smooth-scroll.jsを入手
githubで公開されていますので、下記よりダウンロードします。早くCDNで配信してくれないかな・・・
つかうのは、distフォルダ内にある「smooth-scroll.polyfills.min.js」です。
実装方法
html
htmlで読み込みます。
<script src="assets/js/smooth-scroll.polyfills.min.js"></script>
javascript
固定ヘッダではない場合、javascriptは一行追加するだけです。
var scroll = new SmoothScroll('a[href*="#"]');
固定ヘッダのページでつかう場合のjavascript
で、肝心の固定ヘッダの場合には次のように書きます。
var scroll = new SmoothScroll('a[href*="#"]', {
header: '#header'
});
headerのオプションで<header>に指定しているID名を指定します。上のサンプルは<header id="header">の場合の例です。
スクロールの速度の調整
スクロールのスピードも調整できます。
var scroll = new SmoothScroll('a[href*="#"]', {
header: '#header',
speed: 1000,
});