プログラミング

JavaScriptでなめらかにスクロール！スムーススクロールの基本と実装手順

JavaScriptでなめらかにスクロール！スムーススクロールの基本と実装手順

Webページ上でリンクをクリックしたときに、画面がふわっと滑らかにスクロールする「スムーススクロール」は、ユーザー体験を向上させる定番の演出です。本記事では、JavaScriptを使ってスムーススクロールを実装する方法を、初心者にも分かりやすく解説します。実際のコード例や専門用語の解説も交えて、今日からすぐに使えるように丁寧にご紹介します。

目次

スムーススクロールとは？JavaScriptでできること

スムーススクロールとは、Webページ内のリンクをクリックした際に、画面が一気にジャンプするのではなく、なめらかにスクロールして目的の場所に移動する機能のことです。これは「ユーザーインターフェース（UI）」の向上に繋がり、閲覧者にとっても快適な体験を提供できます。

JavaScriptを使えば、このスムーススクロールを柔軟にカスタマイズして実装できます。たとえばスクロール速度やタイミング、対象要素の調整などが可能です。

スムーススクロールを実装する2つの方法

JavaScriptでスムーススクロールを実装するには、主に次の2つの方法があります。

scrollIntoViewメソッドを使う

最もシンプルな方法が、JavaScriptの Element.scrollIntoView() メソッドを使うものです。まずは、HTML、CSS、JavaScriptそれぞれのファイルや記述箇所を分かりやすく解説します。

HTML（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>スムーススクロールの例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a href="#section1">セクション1へ移動</a>

  <div style="height: 1000px;"></div> <!-- スクロール用の余白 -->

  <div id="section1">ここがセクション1です</div>

  <script src="script.js"></script>
</body>
</html>

CSS（style.css）

body {
  font-family: sans-serif;
}
#section1 {
  background-color: #f0f0f0;
  padding: 50px;
  margin-top: 20px;
}

JavaScript（script.js）

document.querySelector('a[href^="#"]').addEventListener('click', function(event) {
  event.preventDefault();
  const targetId = this.getAttribute('href');
  const targetElement = document.querySelector(targetId);
  targetElement.scrollIntoView({ behavior: 'smooth' });
});

このように、HTMLでリンクと移動先の要素を用意し、JavaScriptでスクロール動作を制御します。

scrollIntoViewのメリットと注意点

  • モダンなブラウザに対応（IEでは非対応）
  • シンプルなコードで実装可能
  • スクロールの制御は限られる（スピード調整不可）

requestAnimationFrameを使ってカスタマイズ

もっと細かくスクロール挙動をコントロールしたい場合は、requestAnimationFrame を使った実装方法がおすすめです。

HTML（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カスタムスムーススクロール</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a href="#target">スクロールして移動</a>

  <div style="height: 1000px;"></div>

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

  <script src="script.js"></script>
</body>
</html>

CSS（style.css）

#target {
  padding: 40px;
  background-color: #e0e0e0;
}

JavaScript（script.js）

function smoothScroll(target, duration) {
  const targetElement = document.querySelector(target);
  const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const startTime = performance.now();

  function animation(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    window.scrollTo(0, startPosition + distance * easeInOutQuad(progress));

    if (progress < 1) {
      requestAnimationFrame(animation);
    }
  }

  function easeInOutQuad(t) {
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  }

  requestAnimationFrame(animation);
}

document.querySelector('a[href^="#"]').addEventListener('click', function(event) {
  event.preventDefault();
  smoothScroll(this.getAttribute('href'), 800);
});

この方法のメリット

  • スクロールスピードのカスタマイズが可能
  • アニメーションカーブも調整できる
  • より自然な挙動に近づけられる

JavaScript以外の方法との比較

スムーススクロールはJavaScriptだけでなく、CSSやjQueryでも実装可能です。

CSSでの実装（簡易的）

html {
  scroll-behavior: smooth;
}

この方法は非常に簡単ですが、以下のような制約があります：

  • モダンブラウザ限定（SafariやIEで非対応）
  • スクロール速度などの細かい調整は不可

jQueryでの実装

$('a[href^="#"]').click(function(event) {
  event.preventDefault();
  const target = $($(this).attr('href'));
  if (target.length) {
    $('html, body').animate({ scrollTop: target.offset().top }, 800);
  }
});

jQueryを既に使っているプロジェクトであれば便利ですが、最近はJavaScriptの標準機能で十分なことが多いため、新規ではおすすめしません。

スムーススクロールを実装する際の注意点

スムーススクロールを導入する際は、以下のポイントにも注意しましょう。

  • アンカーリンクが正しく設定されているか確認する
  • スクロール先の要素が非表示状態だと動かないことがある
  • ページ全体のスクロール量やヘッダーの高さを考慮する
  • アクセシビリティ（視覚障害者の方など）への配慮も必要

まとめ

スムーススクロールは、ただの見た目の演出だけでなく、ユーザーの直感的な操作をサポートするための重要なUI要素です。JavaScriptで実装すれば、様々な状況に対応したカスタマイズも可能になります。

シンプルに scrollIntoView() を使う方法から、高度なアニメーションを加える requestAnimationFrame を用いた方法まで、自分のサイトや用途に合わせた実装方法を選んでみてください。

この記事を参考に、ぜひ自分のWebサイトにもなめらかなスムーススクロールを取り入れてみましょう。