[jQuery] ブログページの目次にハイライト機能を実装する方法

2024年8月18日2024年8月23日

スクロール位置に合わせて、目次がハイライトされる実装をしたい。

zennの目次のように、スクロール位置に合わせてサイドバーの目次のハイライト位置が変わる実装。
https://zenn.dev/nondescript/articles/72aabaaeda4e39

前回の記事では、本文から目次を動的に生成する方法についてまとめました。

ハイライト機能の実装

早速ですが完成イメージはこんな感じです。

See the Pen ハイライト機能 by YT (@YT-the-scripter) on CodePen.

スクロール位置に合わせて、目次の色が変化してます。

コード解説

  let $links = [];
中略
  $links.push({ link: $link, target: $element });

まずはlink配列を作成します。
配列の一つ一つの要素には、linkとelementを入れます。

 $links.forEach(function (item) {
      // タイトルの画面上の位置
      const targetTop = item.target.offset().top;
      // もしもスクロール位置が、該当タイトルよりも大きい場合
      if (scrollTop >= targetTop) {
        // 適当なオフセット
        currentSection = item;
      }
    });
    if (currentSection) {
      $outline.find("li").removeClass("active");
      currentSection.link.parent("li").addClass("active");
    }
  });

$links配列の数分ループ処理をします。
links配列には指定した、h2,h3タグの要素が一つずつ入っています。
なので例えば10個タグがある場合は、10回ループが回る。

その中で、scrolTop(現在のスクロール位置)がtargetTop(タグの位置)よりも大きい場合に、ハイライトを付けたい要素にハイライトフラグを立てます。(currentSection)

currentSectionに指定された要素に対して、activeクラスをつけることでハイライト処理を実装できます。