スムーススクロール（CSS のみ）
ナビゲーションクリックで該当セクションへ滑らかにスクロール。anchor リンクの代わりに scrollIntoView() を使う、iframe 環境でも安全に動く実装。
解説
スムーススクロール（CSS のみ）は、インタラクションカテゴリの「スムーススクロール」に分類される実装パターンです。CSS と JavaScript の組み合わせで構成され、難易度はシンプルレベル。
ナビゲーションクリックで該当セクションへ滑らかにスクロール。anchor リンクの代わりに scrollIntoView() を使う、iframe 環境でも安全に動く実装。
仕組み
下記コードタブから HTML / CSS / JS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
CSS プロパティだけで完結しているため、フレームワーク非依存・軽量に組み込めます。React / Vue / Astro / 静的 HTML どれにも持ち込み可能です。
注意点 / カスタマイズ時のポイント
クラス名は BEM 命名で prefix を付けてあるため、既存サイトに貼り付けても CSS が衝突しにくくなっています。色や余白は CSS カスタムプロパティに切り出してデザインシステム化することも可能です。
使用例・適したシーン
- ワンページ LP のセクション移動
- 目次からのジャンプ
よくある質問
このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。
jQuery でも書けますか？
この実装は vanilla JavaScript で書いています。jQuery が必要であれば
document.querySelector を $() に置き換える程度で動作しますが、近年は jQuery を使わない方が軽量で推奨されます。