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

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

web dev

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です。※すでに配置済みの場合は不要です。

jQuery公式

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

jQuery CDN

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」のメッセージとその前に立つ靴先