固定ヘッダも考慮してページ内リンクをスクロールさせる「smooth-scroll.js」

FRONTEND

2019.04.5

固定ヘッダも考慮してページ内リンクをスクロールさせる「smooth-scroll.js」

LPなどで見かけるページ内リンクのスムーススクロール。簡単に実装でき、気が利いている感も出るのでよく使います。もちろん、ユーザーがページ内での現在地を見失ったりしたいよう、ユーザビリティも考慮していますが。ただ、そのページのヘッダが固定されていたりすると結構面倒。ヘッダの下にリンク先のコンテンツが隠れてしまったり・・・

今回紹介するsmooth-scroll.jsは、悩ましい固定ヘッダのことも考慮された素晴らしいスムーススクロールのjsです。

smooth-scroll.jsを入手

githubで公開されていますので、下記よりダウンロードします。早くCDNで配信してくれないかな・・・

smooth-scroll

つかうのは、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,
});