スクロールに応じた目次の現在位置をハイライトする簡単な方法
この記事では、固定配置した目次にスクロールに応じて現在位置をハイライトする方法について詳しく解説します。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です。※すでに配置済みの場合は不要です。
jQuery公式
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script></pre>
Google CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
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{…}
内のスタイルが適用されます。
おわりに
以上、jQueryを利用して簡単に目次に現在地をハイライトする方法をご紹介しました。ぜひ実際に試して、より良いブラウジング効果を体感してください。