jQuery非依存のスムーススクロール「smooth-scroll.js」

はじめに

jQuery非依存でスムーススクロールを実装できる「smooth-scroll.js」をご紹介します。
軽量で、easingも複数用意されています。

公式DEMOはこちら

使ってみる

まずダウンロード

こちらから

設置する

jsの読み込み

パスは適宜変えて下さい。

<script src="assets/js/smooth-scroll.js"></script>

アンカーリンクを設定

使用したいアンカーリンクに「data-scroll」を付与します。

<a data-scroll href="#anchor01">アンカー1へ</a>

jsを実行

ページの下部に記述するのが推奨されています

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

これだけでスムーススクロールが実装できます。
あとは必要に応じてオプションを追加していく形になります。

上部固定の要素がある場合

ヘッダーなど上部固定の要素がある場合は、そのままスムーススクロールしてもかぶってしまいます。
その場合は上部固定要素に対して「data-scroll-header」を付与し、jsの記述も変更することで対応できます。

<header data-scroll-header class="header">上部固定の要素</header>

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

デモ

現場でよく使いそうな、レスポンシブでヘッダーが上部固定から固定なしに変化するパターンに対応したデモを作成しました。

DEMO

「window.addEventListener(‘DOMContentLoaded’, function() {});」を使用し、ロード後に画面の幅を取得、取得した値によって条件分岐させています。
上記のデモであれば768px以下は上部固定ヘッダーに対応、それ以外は通常のスムーススクロールにしています。

window.addEventListener('DOMContentLoaded', function() {
  var w = window.innerWidth;
  if (w <= 768){
    var scroll = new SmoothScroll('a[href*="#"]',{
      header: '[data-scroll-header]'
    });
  }else{
    var scroll = new SmoothScroll('a[href*="#"]');
  }
});

さいごに

単体で動作するうえ、easingのオプションも豊富なので、ぜひ使って見て下さい。
参考になればと思います。