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

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

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

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

WordPressのおすすめサーバー

特徴
  • 料金が安い
  • WordPressが超高速
  • ドメイン永久無料
  • 安心の実績とサポート体制

新規も乗り換えも

目次

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

// ボタンを選択する
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制作のスクール「デイトラ」がおすすめです。

どのコースも10万円前後と他のスクールに比べても格安で、副業や転職に十分なスキルが身に付きます。

気になった方は、是非アクセスしてみてください。

コースの一部

ご質問などお気軽にコメントどうぞ

コメントする

目次