Webサイトの使いやすさをワンランクアップ！jQueryを使ったスムーズスクロール

2024-06-30

jQueryを使ってページ内アンカーへスムーズスクロールする方法

必要なもの

jQueryライブラリ
アンカー要素（id属性で識別）

手順

アンカー要素にIDを設定
ページ内の移動先となる要素に、id属性を設定します。例えば、以下のように#targetというIDを設定します。
```
<div id="target">ここに移動します</div>
```
<head>セクション内に、jQueryライブラリのファイルを <script> タグを使って読み込みます。
```
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
```
スクロール処理のJavaScriptコードを追加
<body>セクション内に、以下のJavaScriptコードを追加します。このコードは、アンカーリンクをクリックした際に、#target要素までスムーズにスクロールする処理を定義しています。
```
$(document).ready(function(){
  $("a[href*='#target']").click(function(e){
    var target = $(this).attr('href');
    var position = $(target).offset().top;
    $('body,html').animate({scrollTop: position}, 500, 'swing');
    return false;
  });
});
```
コード解説
- $(document).ready(function(){}): ページが読み込まれた後、この中のコードを実行します。
- $("a[href*='#target']"): href属性に#targetを含むすべてのアンカーリンクを選択します。
- .click(function(e){}): アンカーリンクがクリックされた際の処理を定義します。
- var target = $(this).attr('href');: クリックされたアンカーリンクのhref属性値を取得し、target変数に格納します。
- var position = $(target).offset().top;: target要素までの垂直方向のオフセット値を取得し、position変数に格納します。
- $('body,html').animate({scrollTop: position}, 500, 'swing');: スムーズスクロールを実行します。
  - scrollTop: 垂直方向のスクロール位置
  - 500: スクロールにかかる時間（ミリ秒）
  - 'swing' : イージング関数（デフォルト）
- return false;: デフォルトのリンク動作を抑制します。

応用例

ページトップへ戻るボタン
ナビゲーションメニューから各セクションへ移動
長い記事の特定箇所へ移動
アニメーションと組み合わせた演出

補足

上記のコードは基本的な例であり、オプションやカスタマイズも可能です。
jQueryには様々なアニメーションライブラリも存在し、より高度なスクロール演出を実現できます。
ユーザーアクセシビリティを考慮し、キーボード操作にも対応した設計が望ましいです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スムーズスクロール</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>見出し1</h1>
  <p>本文1</p>

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

  <div id="target1">
    <h2>見出し2</h2>
    <p>本文2</p>

    <a href="#target2">セクション3へ移動</a>
  </div>

  <div id="target2">
    <h2>見出し3</h2>
    <p>本文3</p>

    <a href="#top">ページトップへ戻る</a>
  </div>

  <a href="#top" id="top">ページトップ</a>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

#target1, #target2 {
  margin-top: 50px;
  padding: 20px;
  border: 1px solid #ccc;
}

JavaScript

$(document).ready(function(){
  $("a[href*='#']").click(function(e){
    var target = $(this).attr('href');
    var position = $(target).offset().top;
    $('body,html').animate({scrollTop: position}, 500, 'swing');
    return false;
  });
});

説明

HTML:
- #target1、#target2、#top などのIDを持つ要素を定義しています。
- これらの要素へ移動するためのアンカーリンクを設定しています。
- script.js と style.css ファイルを読み込んでいます。
CSS:
- 基本的なスタイルを定義しています。
JavaScript:

このコードを参考に、ご自身のWebサイトにスムーズスクロール機能を追加してみてください。

jQuery以外の方法でページ内アンカーへスムーズスクロールする方法

CSSの scroll-behavior プロパティを使用すると、ページ内リンクのクリック時にスムーズスクロールを自動的に適用できます。

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

このコードは、href 属性が # で始まるすべてのアンカーリンクに対して、スムーズスクロールを適用します。

JavaScriptのネイティブAPI

jQueryに頼らず、JavaScriptのネイティブAPIを使用してスムーズスクロールを実現することもできます。

document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    var position = $(target).offset().top;
    window.scrollTo({
      top: position,
      behavior: 'smooth'
    });
  });
});