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

// ボタンを選択する
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);
    }
  }
});