「ページ内リンクをクリックしたとき、ふわっと目的地までスクロールさせたい」──そんなときに便利なのがスムーススクロールです。jQueryを使わなくても、JavaScriptだけで簡単に実装できます。

スムーススクロールとは？

スムーススクロールとは、ページ内リンクをクリックした際に、瞬間的に移動するのではなく、ゆっくりと滑らかにスクロールするアニメーションを指します。

HTMLの基本構造

まずはページ内リンクの例を確認しましょう。

<a href="#section2">セクション2へ移動</a>

<div id="section2">
  ここが目的地！
</div>

JavaScriptでスムーススクロールを実装

scrollIntoView()を使うと、スムースに目的地へ移動できます。

document.addEventListener("DOMContentLoaded", () => {
  const links = document.querySelectorAll('a[href^="#"]');
  
  links.forEach(link => {
    link.addEventListener("click", e => {
      e.preventDefault();
      const targetId = link.getAttribute("href").substring(1);
      const targetElement = document.getElementById(targetId);
      
      if (targetElement) {
        targetElement.scrollIntoView({
          behavior: "smooth"
        });
      }
    });
  });
});

ポイント解説

• e.preventDefault()：通常のジャンプ挙動を止める
• scrollIntoView({ behavior: "smooth" })：スムーススクロールを実行

古いブラウザに対応するには？

古いブラウザ（IEなど）では scrollIntoView の behavior: "smooth" が効かないことがあります。その場合は polyfill や requestAnimationFrame を使った自作スクロール関数を使う方法もありますが、近年はモダンブラウザ中心なので基本は不要です。

おわりに

スムーススクロールは、ユーザーにとって自然で心地よい体験を提供できます。jQueryを使わず、軽量な実装を目指すなら、今回の方法がおすすめです。

次回は「ページ上部に戻るボタンのスムーススクロール実装」など、応用テクニックも紹介します！