記事の目次からページ内リンクで滑らかに移動するナビ。scroll-behaviorとscroll-marginの2プロパティで、JSなしで完成します。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
アンカーリンク（href="#id"）はHTML標準の機能なので、CSSは移動の質だけを整えます。scroll-behavior: smooth で移動が滑らかになり、scroll-margin-top が「固定ヘッダーの下に見出しが潜り込む」定番トラブルを解決します。スムーススクロールは酔いの原因にもなるため、prefers-reduced-motion では必ず即時ジャンプに戻します。
現在位置のハイライトまで必要な場合はJS（IntersectionObserver）の領域です。目次だけならこのレシピで十分です。
ページ内目次のナビゲーションを作ってください。scroll-behavior: smoothで滑らかに移動し、scroll-margin-topで固定ヘッダー分の着地位置を確保、prefers-reduced-motionでは即時ジャンプに戻してください。JSは使わないでください。