HTMLページをスムーズにスクロールさせる！アンカーリンクとJavaScript/jQueryによる実装方法

2024-04-27

HTMLページを指定されたアンカーにスクロールする方法

この機能を実現するには、主に以下の3つの方法があります。

HTMLのアンカーリンク

HTMLの<a>タグを使って、ページ内リンクを作成することができます。

<a href="#target">リンクテキスト</a>

上記の例では、「リンクテキスト」をクリックすると、ページ内の id="target" 要素までスクロールします。

JavaScriptを使用して、より動的なスクロールを実現することができます。

document.getElementById('target').scrollIntoView({
  behavior: 'smooth'
});

上記のコードは、id="target" 要素までスムーズにスクロールします。

jQueryライブラリを使用すると、より簡潔にコードを書くことができます。

$(document).ready(function(){
  $("a[href='#target']").on('click', function(e){
    e.preventDefault();
    $(window).scrollTo('#target', {
      duration: 500,
      easing: 'linear'
    });
  });
});

上記のコードは、a[href="#target"] 要素がクリックされたときに、#target 要素まで500ミリ秒かけてスクロールします。

補足

アンカー要素には、id 属性の代わりに name 属性を使用することもできます。
JavaScriptやjQueryを使用する場合は、ライブラリの読み込みが必要となります。
スムーズなスクロールを実現するには、behavior または easing オプションを指定することができます。

上記以外にも、様々な方法でスクロールを実現することができます。用途や目的に合わせて、適切な方法を選択してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スクロールサンプル</title>
</head>
<body>
  <h1>ページトップ</h1>

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

  <section id="section1">
    <h2>セクション1</h2>
    <p>セクション1の内容です。</p>
  </section>

  <section id="section2">
    <h2>セクション2</h2>
    <p>セクション2の内容です。</p>
  </section>

  <section id="section3">
    <h2>セクション3</h2>
    <p>セクション3の内容です。</p>
  </section>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("a[href='#section1']").on('click', function(e){
        e.preventDefault();
        $(window).scrollTo('#section1', {
          duration: 500,
          easing: 'linear'
        });
      });

      $("a[href='#section2']").on('click', function(e){
        e.preventDefault();
        $(window).scrollTo('#section2', {
          duration: 500,
          easing: 'linear'
        });
      });

      $("a[href='#section3']").on('click', function(e){
        e.preventDefault();
        $(window).scrollTo('#section3', {
          duration: 500,
          easing: 'linear'
        });
      });
    });
  </script>
</body>
</html>

JavaScript

document.getElementById('section1').scrollIntoView({
  behavior: 'smooth'
});

jQuery

$(document).ready(function(){
  $("a[href='#section1']").on('click', function(e){
    e.preventDefault();
    $(window).scrollTo('#section1', {
      duration: 500,
      easing: 'linear'
    });
  });
});

説明

上記のコードでは、以下の処理が行われます。

HTMLページに3つのセクションと、各セクションへ移動するためのリンクを作成します。
JavaScriptまたはjQueryを使用して、リンクをクリックしたときに、対応するセクションまでスムーズにスクロールする処理を記述します。

上記のコードはあくまで一例です。必要に応じて、アレンジしてください。
JavaScriptとjQueryのコードは、それぞれ別の <script> タグで記述する必要があります。

その他のスクロール方法

以下に、いくつか例を挙げます。

CSSの scroll-behavior プロパティを使用すると、ページ内リンクをクリックしたときのスクロール挙動を指定することができます。

a[href="#target"] {
  scroll-behavior: smooth;
}

CSSの animation プロパティを使用して、アニメーション付きのスクロールを実現することができます。

#target {
  animation: scroll 1s ease-in-out;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px); /* スクロール量を調整 */
  }
}