jQueryを使ったスムーススクロールの実装

css 2024/01/18

1 デモ
2 jQueryの導入
3 HTML構造の設定
- 3.1 jQueryコードの追加
4 まとめ

ユーザーフレンドリーなウェブページを構築するためには、ページ内のリンクをクリックしたときにスムースにスクロールする機能が役立ちます。この記事では、jQueryを使用してこのスムーススクロールを簡単に実装する方法を解説します。

デモ

See the Pen wow.js sample by hide (@hide225) on CodePen.

jQueryの導入

まず最初に、jQueryをプロジェクトに組み込みましょう。以下のCDNを使用すると手軽に読み込むことができます。

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

HTML構造の設定

Wow.jsを初期化してアニメーションを有効にします。

<nav>
 <ul>
  <li><a href="#section1">セクション1</a></li>
  <li><a href="#section2">セクション2</a></li>
  <li><a href="#section3">セクション3</a></li>
 </ul>
</nav>

<div id="section1">
 <!-- セクション1のコンテンツ -->
</div>

<div id="section2">
 <!-- セクション2のコンテンツ -->
</div>

<div id="section3">
 <!-- セクション3のコンテンツ -->
</div>

jQueryコードの追加

以下のjQueryコードを追加します。
ページ内のリンクがクリックされたときに、対象のセクションまでスムースにスクロールするように設定しています。

// ページの読み込みが完了したら以下の処理を実行
$(document).ready(function () {
  // ページ内のすべてのアンカーリンク（hrefが#で始まるリンク）に対してクリックイベントを設定
  $('a[href^="#"]').on('click', function (event) {
    // デフォルトのイベント（通常のリンク遷移）をキャンセル
    event.preventDefault();

    // クリックされたアンカーリンクのhref属性の値（#から始まるセレクタ）を取得
    let target = this.hash;
    // 対象のセクションをjQueryオブジェクトとして取得
    let $target = $(target);

    // ページ全体を指定したセクションまでスムーズにスクロールするアニメーションを実行
    $('html, body').animate({
      'scrollTop': $target.offset().top
    }, 800, 'swing', function () {
      // スクロール完了後にブラウザのURLを変更して、アドレスバーに #target などが表示されるようにする
      window.location.hash = target;
    });
  });
});