縦ドットページインジケータ
1 ページ完結型の LP でよく見る、画面右側に固定された縦並びのドットナビです。現在表示中のセクションのドットがハイライトされ、クリックするとそのセクションへジャンプします。仕組みは、JavaScript が scroll イベントで各セクションの offsetTop とスクロール位置を比べ、いま見えているセクシ…
解説
1 ページ完結型の LP でよく見る、画面右側に固定された縦並びのドットナビです。現在表示中のセクションのドットがハイライトされ、クリックするとそのセクションへジャンプします。仕組みは、JavaScript が scroll イベントで各セクションの offsetTop とスクロール位置を比べ、いま見えているセクションを判定して対応するドットに is-active クラスを付ける、いわゆるスクロールスパイです。なめらかなジャンプは CSS の scroll-behavior: smooth が担当します。
使いどころ
- セクションが縦に連なる 1 ページ型の LP やポートフォリオ
- 全体の現在位置を示しつつ、好きな章へ素早く飛ばしたいページ
- フルスクリーンの章立てで構成された製品紹介サイト
ドットのホバーで出るラベルは各リンクの data-tip を書き換えれば変更できます。判定の基準値（このコードの -200）を調整すると、どのタイミングでハイライトが切り替わるかを微調整できます。注意点として、ドットだけでは何の節か分かりにくいので ラベルやアンカー名 を意味のある語にし、スクロール毎の処理が重い場合は requestAnimationFrame や IntersectionObserver に置き換えると軽くなります。色は is-active のスタイルで調整できます。
使用例・適したシーン
- コーポレートサイトのグローバルナビ
- EC サイトのヘッダー
- SaaS の管理画面
- モバイル向け Web アプリ
よくある質問
ハイライトが切り替わるタイミングを調整したいです。
JavaScript で各セクションの位置とスクロール量を比較して現在地を判定しています。基準にしている 200px の余白の数値を変えると、ドットの強調が切り替わる位置を調整できます。
スクロールごとの処理は重くなりませんか？
このコードは scroll イベントごとに全セクションの位置を計算します。セクションが多い場合は処理が増えるため、requestAnimationFrame でまびくか、IntersectionObserver で各セクションの表示を監視する方式に置き換えると、より軽く滑らかに動きます。動作自体はどちらでも同じです。