ページ内リンクのスムーススクロールをjQueryなしで実装する方法

ページ内リンクをクリックした時に滑らかに移動させるスムーススクロールは、jQueryを使えば簡単に実装できますが、jQueryに依存したくない場合もあるかと思います。

jQueryを使わずに素のJavaScriptでスムーススクロールを実装する方法が鼻ブログさんで解説されていたので、ご紹介したいと思います。

別の投稿用に作成したデモページですが、以下ページにスムーススクロールを実装しました。

デモページを見る

ヘッダーのリンクをクリックすると、ページ内の各セクションにスルッと滑らかに移動します。

ページ内リンクのスムーススクロールをjQueryなしで実装する方法

スムーススクロールを実装するには、以下のスクリプトを</body>の直前に記述します。

<script>
var scrollElm = (function() {
  if('scrollingElement' in document) return document.scrollingElement;
  if(navigator.userAgent.indexOf('WebKit') != -1) return document.body;
  return document.documentElement;
})();
(function() {
  var duration = 800;
  var ignore = '.noscroll';
  var easing = function (t, b, c, d) { return c * (0.5 - Math.cos(t / d * Math.PI) / 2) + b; }; //jswing
  var smoothScrollElm = document.querySelectorAll('a[href^="#"]:not(' + ignore +')');
  Array.prototype.forEach.call(smoothScrollElm, function(elm) {
    elm.addEventListener('click', function(e) {
      e.preventDefault();
      var targetElm = document.querySelector(elm.getAttribute('href'));
      if(!targetElm) return;
      var targetPos = targetElm.getBoundingClientRect().top;
      var startTime = Date.now();
      var scrollFrom = scrollElm.scrollTop;
      (function loop() {
        var currentTime = Date.now() - startTime;
        if(currentTime < duration) {
          scrollTo(0, easing(currentTime, scrollFrom, targetPos, duration));
          window.requestAnimationFrame(loop);
        } else {
          scrollTo(0, targetPos + scrollFrom);
        }
      })();
    })
  });
})();
</script>

これだけで、ページ内リンクをクリックした時に、滑らかに移動するようになります。「var duration = 800;」のところで移動時間が設定されているので、好みの時間(ミリ秒)に変更します。

スムーススクロールさせたくないリンクには、.noscrollクラスを追加します。

<a href="#target" class="noscroll">ページ内リンク</a>

もしイージングの種類を変更したい場合は、ちょっと複雑なので鼻ブログさんの記事をご参照いただければと思います。

あとがき

jQueryを使う場合に比べるとだいぶコードは長くなりますが、他にjQueryを使う箇所がないのであれば、素のJavaScriptで実装した方が重くならなくて良いですね。