スムーススクロールナビゲーション

解説

これは、リンクを押すと該当セクションまでなめらかにスクロールし、今読んでいる箇所のメニューを自動でハイライトするナビゲーションです。リンクのクリックでは既定の動作を止めて scrollIntoView({behavior:'smooth'}) で滑らかに移動します。さらにスクロール位置を監視し、各セクションの offsetTop と比較して現在地を判定し、対応するリンクに is-active を付けて現在位置を示します。メニューは position:sticky で固定され、長いページでも常に手元に残ります。

使いどころ

• 1ページ完結のランディングページの目次・サイドナビ
• 「概要・サービス・実績・問い合わせ」のような縦長構成の案内
• 長文のドキュメントやヘルプページの現在地表示

セクションを増やすときは、リンクの飛び先（href）と同じ ID をセクションに付けるだけです。ハイライトが切り替わる位置は判定のしきい値（このデモでは60px）で調整できます。固定ヘッダーがある場合は、スクロール先が見出しの下に隠れないよう scroll-margin-top を足すと綺麗に止まります。動きを抑えたい利用者には prefers-reduced-motion を見て瞬時移動へ切り替えると 配慮になります。

使用例・適したシーン

• LP の演出強化
• 記事の読了率向上
• ストーリーテリング表現