スムーススクロール（CSS のみ）
ナビゲーションクリックで該当セクションへ滑らかにスクロール。anchor リンクの代わりに scrollIntoView() を使う、iframe 環境でも安全に動く実装。
解説
ナビのボタンを押すと、対応するセクションへ滑らかにスクロールする実装です。CSS 側で html{scroll-behavior:smooth} を指定しつつ、各ボタンの data-to 属性から移動先を読み取り、JavaScript の scrollIntoView({behavior:'smooth'}) で移動させています。アンカーリンク（#id）ではなくスクリプトで動かすため、URL のハッシュが変わらず、プレビューや埋め込み環境でも安全に動作するのが特徴です。
使う場面
- 1ページ完結の LP で章へジャンプする目次ナビ
- サービス紹介の「特徴」「料金」「FAQ」への横移動
- 長い記事ページの固定ヘッダーからのセクション移動
ナビは position:sticky; top:0 で上部に貼り付くため、スクロール後もすぐ次のセクションへ移れます。移動先は scrollIntoView の block:'start' で先頭にそろえますが、固定ヘッダーと重なる場合は対象に scroll-margin-top を付けて隠れを防ぎます。スムーズな動きが不要なユーザーには prefers-reduced-motion で瞬時移動に切り替えると、操作の負担を減らせます。
使用例・適したシーン
- ワンページ LP のセクション移動
- 目次からのジャンプ
よくある質問
アンカーリンクと何が違いますか？
通常の #id リンクは URL にハッシュが付き、iframe や一部プレビュー環境で意図せず親ページが動くことがあります。このスニペットは scrollIntoView で移動するためハッシュが付かず、埋め込み環境でも安全に動く点が違いです。
固定ヘッダーで移動先が隠れます。どうすれば？
移動先のセクションに scroll-margin-top をヘッダーの高さぶん指定すると、スクロール停止位置がヘッダーのぶん下がり、見出しが隠れなくなります。JS は変更不要です。