【JavaScript】ページトップボタンの美しいスムーススクロール

【JavaScript】ページトップボタンの美しいスムーススクロール

JavaScript(Vanilla JS)を使ってページトップ戻るボタンの美しいスムーススクロールを実現します。

脱jQueryの第一歩としても良いのではないでしょうか。

目次

ページトップボタンのスクロールのコード

// ボタンを選択する
var btn = document.querySelector("#to-top");

// イージング機能 (easeOutExpo)
var easing = function (t) { return (t === 1) ? 1 : 1 * (-Math.pow(2, -10 * t) + 1); };

// ボタンがクリックされたとき
btn.addEventListener("click", function() {
  // ページの現在のY位置を取得する
  var currentY = window.pageYOffset;

  // 指定された速度に基づき、スクロールアニメーションの総時間を計算する
  var scrollDuration = 1000;

  // スムーズなアニメーションでページ上部にスクロールする
  window.scroll({
    top: 0,
    left: 0,
    behavior: "smooth"
  });

  // ネイティブのスムーズスクロール動作をカスタムアニメーションでオーバーライドする
  var start = null;
  requestAnimationFrame(step);
  function step(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;
    var ease = easing(progress/scrollDuration);
    window.scrollTo(0, currentY - (currentY * ease));
    if (progress < scrollDuration) {
      requestAnimationFrame(step);
    }
  }
});

一番上のquerySelector()にはページトップボタンの要素を入力してください。

美しいといった理由

美しいと表現したのは、イージング(動き方)をeaseOutExpoにしているからです。

ボタンを押した際にシュっと動いて、目的地付近ではふわっと終わる。

この動き最高です。

イージングを変更したい場合は、easingの中身をイージング関数からコピペして変更するだけです。

var easing = function (t) { ここを変更 };

裏話

実はこれAIであるChatGPTに作ってもらいました。

何度か質問を繰り返し、ほぼ理想のコードになりました。

ただこの関数、距離によっては最大6pxほど距離が足りないことがあるので、改善の余地はあるかもしれません。

また完璧と思えるコードができましたら更新します。

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ!
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

役に立ったら他の方にシェア

お気軽にコメントどうぞ

コメントする

目次