【更新日 :

【脱Jquery】javascriptでスムーススクロールを実装する

Category: JavaScript

Vanilla JSでスムーススクロールを実装したサンプルです。
イージングのカスタマイズにも対応しています。


See the Pen
Untitled
by Kazuma Sakata (@sakata-kazuma)
on CodePen.


HTML

<p><a href="#img">画像まで移動</a></p>
<p id="img"><img src="https://picsum.photos/id/1003/500/600" alt="" width="500" height="600"></p>

アンカーリンクを設定してください。特に特別な実装はありません。

JS

//スムーススクロール関数
function smoothScroll() {
  //スクロールリンク取得
  const targets = Array.prototype.slice.call(document.querySelectorAll('a[href^="#"]'),0);
  if(targets.length === 0) {
    return false;
  }

  /*
    イージング設定
      ・参考サイト
        https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
        https://noze.space/archives/432#index-3
    「t:アニメーションの経過時間」「b:始点」「c:変化量」「d:変化にかける時間」
  */
  function easing(t, b, c, d) {
    return c * (0.5 - Math.cos((t / d) * Math.PI) / 2) + b;
  }

  //スクロール速度
  const animeSpeed = 600;

  //クリックイベント設定
  targets.forEach(function(target){
    target.addEventListener('click', function (event) {
      event.preventDefault();
      //スクロールイベント重複防止
      if (document.body.classList.contains('is-scroll-busy')) {
        return false;
      }
      document.body.classList.add('is-scroll-busy');

      //hrefから遷移先を取得
      const href = target.getAttribute('href');
      const scrollStopTarget = document.querySelector(href == '#' || href == '' ? 'html' : href);

      //移動先取得
      const scrollStopTop = scrollStopTarget.getBoundingClientRect().top;

      //現在のスクロール量
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

      //アニメーション開始時間
      const start = new Date();
      //スクロールアニメーション関数
      function mainAnime() {
        //イベント発生後の経過時間
        let elapsedTime = new Date() - start;

        //アニメーション終了処理
        if (elapsedTime > animeSpeed) {
          //実行中class削除
          document.body.classList.remove('is-scroll-busy');

          //処理を終了
          return false;
        }

        //スクロール処理
        window.scrollTo(
          0,
          //「アニメーションの経過時間」,「始点」,「変化量」,「変化にかける時間」
          easing(elapsedTime, scrollTop, scrollStopTop, animeSpeed)
        );
        requestAnimationFrame(mainAnime);
      }

      //アニメーション初回呼び出し
      requestAnimationFrame(mainAnime);
    });
  });
}

イージング設定やスクロール速度はサイトに合わせて編集してください。

関数の呼び出し

任意の場所で以下を実行し関数を呼び出してください。

//スムーススクロール関数呼び出し
smoothScroll();

参考リンク

Category : JavaScript