JavaScriptのみでスムーススクロールを実装する方法

今回はjQueryを一切使わずにJavaScriptのみでスムーススクロールを実装する方法を紹介します。

可能な限りjQueryを使わない事で余計なファイルを削減出来るのでサイトが軽くなりパフォーマンスが上がる場合があります。
今回紹介するスムーススクロールの実装もjQueryに頼らずともJavaScriptで意外と簡単に実装できるので是非活用して見て下さい。

JavaScriptのみでスムーススクロールを実装する方法

JavaScriptのみでスムーススクロールを実装する方法は意外と簡単に出来ます。というより今から紹介するJSをコピペすればいけます。

以下の様にアンカーリンクを設置したHTMLとその下にあるJavaScriptのコードだけでスムーススクロールは実装できます。

<main>
 <div class="jcntent">
   <div class="btn_a"><a href="#a">Aの場所へ</a></div>
   <div class="btn_b"><a href="#b">Bの場所へ</a></div>
   <div class="btn_c"><a href="#c">Bの場所へ</a></div>
 </div>
   <div id="a">Aの場所</div>
<!--適当な要素-->
   <div id="b">Bの場所</div>
<!--適当な要素-->
   <div id="c">Cの場所</div>
<!--適当な要素-->
</main> 

let Ease = {
    easeInOut: t => t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1
  }
   
  // アニメーションの設定（スクロールの速さの調整）
  let duration = 1000;
   
  window.addEventListener('DOMContentLoaded', () => {
   
    // スムーススクロールのトリガーを取得
    let smoothScrollTriggers = document.querySelectorAll('a[href^="#"]');
    smoothScrollTriggers.forEach(function (smoothScrollTrigger) {
   
      // トリガーをクリックした時に実行する関数
      smoothScrollTrigger.addEventListener('click', function (s) {
   
        // href属性の値を取得
        let href = smoothScrollTrigger.getAttribute('href');
   
        // 現在のスクロール位置を取得（主要ブラウザに対応）
        let currentPostion = document.documentElement.scrollTop || document.body.scrollTop;
   
        // スクロール先の要素を取得
        let targetElement = document.getElementById(href.replace('#', ''));
   
        // スクロール先の要素が存在する場合はスムーススクロールを実行
        if (targetElement) {
   
          // デフォルトのイベントアクションをキャンセル
          s.preventDefault();
          s.stopPropagation();
   
          // スクロール先の要素の位置を取得
          let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 0; // 0の数値の部分を変えて調整
   
            // アニメーションのループと時間経過
          let startTime = performance.now();
          let loop = function (nowTime) {
              let time = nowTime - startTime;
              let normalizedTime = time / duration;
   
            // アニメーションの設定
            if (normalizedTime < 1) {
              window.scrollTo(0, currentPostion + ((targetPosition - currentPostion) * Ease.easeInOut(normalizedTime)));
              requestAnimationFrame(loop);
            } else {
              window.scrollTo(0, targetPosition);
            }
          }
          // アニメーションをスタート
          requestAnimationFrame(loop);
        }
      });
   
    });
   
  });

解説と設定

HTMLではアンカーリンクの記述が必須。

JavaScriptでは、
1行目ではアニメーション軌跡を設定しています。
6行目でアニメーションの設定をしています。ここの数値を高くするとゆっくりになります。
11行目~15行目でアンカー付きのaタグリンクをクリックしたらトリガーが始動する様に設定。
34行目でスクロール先の着地点を設定。ここの0の数値を変えれば位置の調整が可能。

以下の動画が実際に上記のJSを記述したページのスムーススクロールの動きかたです。

以上が「JavaScriptのみでスムーススクロールを実装する方法」でした。

これで十分WEBサイトのスムーススクロールとしての役割を果たせているので、パフォーマンスを良くするなら今回紹介したJSで実装した方が良い様な気がします。