スクロールに応じた目次の現在位置をハイライトする簡単な方法

この記事では、固定配置した目次にスクロールに応じて現在位置をハイライトする方法について詳しく解説します。Web開発者やブログ運営者にとって有用なテクニックとなれば幸いです。

Contents

デモページ

デモページを見る

ソースコード

CSS

.table-of-contents {
  position: fixed;
  top: 0;
  left: 0;
  background: beige;
  z-index:2;
}
.toc-highlight {
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
}

解説

  • position: fixed
    目次位置を固定
  • .toc-highlightクラス
    jQueryコードと連動したカレントの目次位置用スタイル

jQuery 3.xを読み込む

以下どちらかのコードをheadに配置してください。2023年11月13日時点の最新バージョンは3.7.1です。※すでに配置済みの場合は不要です。

  1. jQuery公式

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

    jQuery CDN

  2. Google CDN

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

    Hosted Libraries [jQuery] | Google for Developers

JavaScript(jQuery)

$(document).ready(function () {

  // スクロールが発生したら
  $(window).on("scroll", function (e) {
    var targetElement = false;

    // 目次の各リンクに対して
    $(".table-of-contents li a").each(function (i, element) {
      // リンクからセクションのIDを取得
      var headingName = $(element).attr("href").replace(/^#/, "");
      
      // ハイライトが発生するスクロール位置のオフセットを設定
      var offset = 60;
      
      // 対応するセクションの上端からの距離を計算
      var headingPosition = $("#" + headingName)[0].offsetTop - offset;

      // ハイライト用のクラスを一旦削除
      $(element).removeClass("toc-highlight");

      // スクロール位置がセクションに達したらそのリンクを記憶
      if (window.scrollY >= headingPosition) {
        targetElement = element;
      }
    });

    // もしハイライト対象があればそのリンクにクラスを追加
    if (targetElement) {
      $(targetElement).addClass("toc-highlight");
    }
  });
});

解説

  • 1行目: $(document).ready()
    この関数内に含まれるコードはページの読み込みが完了した後に実行されます。

これにより、スクリプトの挙動が安定します。

  • 11行目: var offset = 60
    ハイライトが付く位置がズレている場合、ここの数値で微調整できます。

  • 24行目: addClass("toc-highlight")
    条件に合致した場合にtoc-highlightクラスが目次のリンクに付与され、CSSコードで指定している.toc-highlight{…}内のスタイルが適用されます。

道に書かれた「You are here」のメッセージとその前に立つ靴先

おわりに

以上、jQueryを利用して簡単に目次に現在地をハイライトする方法をご紹介しました。ぜひ実際に試して、より良いブラウジング効果を体感してください。