JavaScriptでスクロール連動する目次を実装する方法｜現在の見出しを色で表示

<a class="article-toc__link" href="#ttl-2">
  実装の流れ
</a>

<!-- 現在位置になった後 -->
<a
  class="article-toc__link is-current"
  href="#ttl-2"
  aria-current="location"
>
  実装の流れ
</a>

<?php
// 記事上部へJavaScript生成の目次を表示する。
?>
<section
  class="article-toc article-toc--inline"
  data-article-toc
  hidden
>
  <h2>目次</h2>
  <nav aria-label="記事内目次">
    <ol
      class="article-toc__list"
      data-article-toc-list
    ></ol>
  </nav>
</section>

<?php if ( is_singular( 'post' ) ) : ?>
  <section
    class="sidebar__section article-toc"
    data-article-toc
    hidden
  >
    <h2>目次</h2>
    <nav aria-label="追従目次">
      <ol
        class="article-toc__list"
        data-article-toc-list
      ></ol>
    </nav>
  </section>
<?php endif; ?>

// 記事本文の見出しから目次対象を取得する。
const content = document.querySelector('.entry-content');
const tocs = Array.from(
  document.querySelectorAll('[data-article-toc]')
);

if (!content || !tocs.length) return;

const headings = Array.from(
  content.querySelectorAll('h2, h3')
).filter((heading) => {
  return !heading.closest(
    '#toc_container, .toc_container, .members-only-content-notice'
  ) && heading.textContent.trim();
});

if (!headings.length) return;

// 見出しリンクに使える一意なIDを保証する。
const usedIds = new Set();
let sectionNumber = 0;
let subsectionNumber = 0;

headings.forEach((heading) => {
  if (heading.tagName === 'H2') {
    sectionNumber += 1;
    subsectionNumber = 0;
  } else {
    subsectionNumber += 1;
  }

  const existingId = heading.id.trim();
  const isUsableId =
    /^[A-Za-z][A-Za-z0-9_.:-]*$/.test(existingId) &&
    !usedIds.has(existingId);

  const generatedId = heading.tagName === 'H2'
    ? `section-${sectionNumber}`
    : `section-${Math.max(sectionNumber, 1)}-${subsectionNumber}`;

  heading.id = isUsableId ? existingId : generatedId;
  usedIds.add(heading.id);
});

// H2を親、H3を子にして目次構造を作る。
tocs.forEach((toc) => {
  const tocList = toc.querySelector('[data-article-toc-list]');
  if (!tocList) return;

  let parentItem = null;

  headings.forEach((heading) => {
    const level = heading.tagName === 'H2' ? 2 : 3;
    const item = document.createElement('li');
    const link = document.createElement('a');

    item.className =
      `article-toc__item article-toc__item--level-${level}`;
    link.className = 'article-toc__link';
    link.href = `#${heading.id}`;
    link.textContent = heading.textContent.trim();
    link.dataset.tocTarget = heading.id;
    item.append(link);

    if (level === 2) {
      tocList.append(item);
      parentItem = item;
      return;
    }

    if (!parentItem) {
      tocList.append(item);
      return;
    }

    let children = parentItem.querySelector(
      ':scope > .article-toc__children'
    );

    if (!children) {
      children = document.createElement('ol');
      children.className = 'article-toc__children';
      parentItem.append(children);
    }

    children.append(item);
  });

  toc.hidden = false;
});

/* 記事見出しを固定ヘッダーの下で停止させる。 */
.entry-content h2,
.entry-content h3 {
  scroll-margin-top: calc(
    var(--site-header-height) + var(--anchor-gap)
  );
}

// 判定位置を通過した最後の見出しを現在位置にする。
const updateCurrent = () => {
  const offset = Number.parseFloat(
    window.getComputedStyle(headings[0]).scrollMarginTop
  ) || 0;

  let current = headings[0];

  headings.forEach((heading) => {
    if (heading.getBoundingClientRect().top <= offset) {
      current = heading;
    }
  });

  setCurrent(current.id);
  ticking = false;
};

// 現在位置のリンクへ状態クラスとアクセシビリティ属性を付ける。
const links = tocs.flatMap((toc) =>
  Array.from(toc.querySelectorAll('[data-toc-target]'))
);

const setCurrent = (id) => {
  links.forEach((link) => {
    const isCurrent = link.dataset.tocTarget === id;

    link.classList.toggle('is-current', isCurrent);

    if (isCurrent) {
      link.setAttribute('aria-current', 'location');
    } else {
      link.removeAttribute('aria-current');
    }
  });
};

// スクロール判定を1画面描画につき最大1回へまとめる。
let ticking = false;

window.addEventListener('scroll', () => {
  if (ticking) return;

  ticking = true;
  window.requestAnimationFrame(updateCurrent);
}, { passive: true });

updateCurrent();

/* 記事詳細の目次を固定ヘッダー下へ追従させる。 */
.article-toc {
  position: sticky;
  top: 10.8rem;
  max-height: calc(100vh - 12.8rem);
  overflow: hidden;
}

.article-toc nav {
  max-height: calc(100vh - 22rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* サイドバー目次の通常時と現在位置を見分けやすくする。 */
.article-toc__link {
  display: block;
  padding: 0.5rem 0.7rem;
  color: var(--color-muted);
  text-decoration: none;
  border-radius: 0.6rem;
  transition:
    color 0.18s ease,
    background-color 0.18s ease;
}

.article-toc__link:hover,
.sidebar .article-toc__link.is-current {
  color: var(--color-primary);
  background: #edf6ff;
}

.sidebar .article-toc {
  display: none;
}

@media (min-width: 768px) {
  .sidebar .article-toc {
    display: block;
  }
}

// 独自目次の生成後だけプラグイン目次を非表示にする。
content.querySelectorAll(
  '#toc_container, .toc_container'
).forEach((fallbackToc) => {
  fallbackToc.classList.add('toc-fallback--enhanced');
  fallbackToc.setAttribute('aria-hidden', 'true');
});