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

ページ内でスムーズなスクロール効果を実現する方法はいくつかあります。この記事では、4つの主要な方法を解説します。

CSS Scroll Behaviorを使う

最もシンプルな方法です。CSSのscroll-behaviorプロパティを利用して、ページ内リンクをクリックした際にスムーズなスクロールを実現します。

/* スムーズなスクロールを全体に適用 */
html {
  scroll-behavior: smooth;
}

この一行のCSSで、ページ内リンクをクリックすると、対象の要素までスムーズにスクロールするようになります。簡単で便利です。

window.scrollTo()を使う

JavaScriptのwindow.scrollTo()メソッドを使用して、指定した座標までスムーズにスクロールできます。

// 1000ピクセルの位置までスムーズにスクロール
window.scrollTo({
  top: 1000,
  left: 0,
  behavior: 'smooth'
});

topはスクロール先の縦位置、leftはスクロール先の横位置を指定します。behavior: ‘smooth’でスムーズなスクロールを設定します。

scrollIntoView()を使う

特定のHTML要素までスムーズにスクロールしたい場合、Element.scrollIntoView()メソッドが便利です。

// IDがtargetの要素までスムーズにスクロール
const element = document.querySelector("#target");
element.scrollIntoView({
  behavior: 'smooth'
});

document.querySelector(“#target”)でスクロールしたい要素を取得し、scrollIntoView({ behavior: ‘smooth’ })でその要素までスムーズにスクロールします。

手動でスムーススクロールを実装

window.requestAnimationFrame()を使用して、細かい制御が可能なスムーススクロールを手動で実装することもできます。

function smoothScroll(target, duration) {
  let targetPosition = target.getBoundingClientRect().top;
  let startPosition = window.pageYOffset;
  let startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    let timeElapsed = currentTime - startTime;
    let run = ease(timeElapsed, startPosition, targetPosition, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

const target = document.querySelector("#target");
smoothScroll(target, 1000);

smoothScroll(target, duration)は、指定されたtarget要素にduration時間でスムーズにスクロールします。
targetPositionはスクロール先の要素の位置、startPositionはスクロールの開始位置を取得します。
ease関数は、時間に応じてスクロールの位置を計算するためのイージング関数です。
requestAnimationFrame(animation)は、ブラウザのリフレッシュレートに合わせてanimation関数を繰り返し実行し、スムーズなアニメーションを実現します。

まとめ

これら4つの方法を利用すれば、様々なシチュエーションでスムーズなスクロールを実装することができます。プロジェクトの要件に合った方法を選んで実装してみてください。