§05-14Search & Navigation
jump-to-section チップ
ページ内の見出しへ飛ぶチップを横に並べる。
長いページでも目的の節にすぐ移動できる。メニューの分類やカテゴリ別の一覧など、縦に長いコンテンツの上部に置くと効く。
実装のポイント
overflow-x-auto の横スクロールにし、選択されたチップを scrollIntoView で表示領域に入れる。端にフェードを付けると続きがあることが伝わる。
- 特徴
- CSS のみ
§05-14Search & Navigation
ページ内の見出しへ飛ぶチップを横に並べる。
長いページでも目的の節にすぐ移動できる。メニューの分類やカテゴリ別の一覧など、縦に長いコンテンツの上部に置くと効く。
overflow-x-auto の横スクロールにし、選択されたチップを scrollIntoView で表示領域に入れる。端にフェードを付けると続きがあることが伝わる。