本文へ移動

§05-13Search & Navigation

anchor TOC (sticky)

ページ脇に追従する目次から見出しへ移動する。

長い文書の構成を常に見せ、読みたい節へ直接飛べる。今どこを読んでいるかも示すので、長文のドキュメントや記事で迷子を防ぐ。

実装のポイント

見出しを IntersectionObserver で監視し、画面内にある節を目次で強調する。目次は position: sticky で追従させ、リンクは #id のアンカーにする。

特徴
  • ブラウザ API
デモで使っているもの
  • motion

このパターンが効く目的