こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、CSSのたった一行で「ページ内リンクのスクロールがなめらかになる」便利なテクニックをご紹介します。
例えば「ページの一番上へ戻る」「下のセクションへジャンプ」といったリンクをクリックしたとき、スクロールが一瞬で切り替わると、ユーザーにとってはやや不親切な印象を与えてしまいます。
そんなときに活躍するのが、CSSプロパティのscroll-behavior: smooth;です。
このプロパティを使えば、JavaScriptを一切書かずに、ページ内リンクの移動をスムーズにアニメーションさせることができます。
操作は非常にシンプルで、対応ブラウザも多く、初心者でも導入しやすいのが魅力です。
この記事では、scroll-behavior: smooth; の基本的な使い方から、注意点、JavaScriptとの違いまでを、具体例を交えてわかりやすく解説していきます。
scroll-behavior: smooth とは？
scroll-behavior は CSS のプロパティの一つで、ページ内リンクや要素間のスクロール動作を滑らかなアニメーションに変えるための指定です。特に以下のような場面で効果を発揮します。
- トップへ戻るボタン（ページ上部への移動）
- ナビゲーションリンクでのセクションジャンプ
- 固定メニューから特定の要素へ移動
主要ブラウザ（Chrome、Firefox、Safari、Edge）ではすでに対応済みで、特別なライブラリも不要です。
実装方法はとてもシンプル
1行でOK！CSSの基本記述
html { scroll-behavior: smooth; } このように、htmlタグに一行追加するだけで、すべてのアンカーリンクのスクロール挙動がスムーズになります。
body に書くのではなく、html に書くのが正しいポイントです。
実際の動作イメージ
HTMLでは以下のようなリンクを使った場合に効果が発揮されます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このリンクをクリックすると、ページ内の id="section2" までが、スーッと滑らかにスクロールされるようになります。
注意点・対応ブラウザ
- Internet Explorer では非対応（使用不可）
- JavaScriptでのスクロール制御と干渉する可能性がある
- すべてのアンカーリンクが対象になるため、意図しない場所でスムースになることも
特に SPA やスクロール制御が細かく設定されているサイトでは、動作検証を事前に行うことが重要です。
JavaScriptとの併用はどうなる？
JavaScriptでもスムーススクロールは以下のように書くことができます。
element.scrollIntoView({ behavior: "smooth" });この場合、CSSの scroll-behavior とは異なるスクロール制御が走るため、両者を併用すると挙動が不安定になることがあります。基本的にはどちらか一方を使用するのがおすすめです。
まとめ：まずはCSSだけで導入してみよう！
- 「scroll-behavior: smooth;」はCSS一行で導入できる軽量なテクニック
- ユーザー体験をさりげなく向上させる優れた方法
- JavaScriptが不要なので、保守・拡張性にも優れる
ページ内リンクの動きをスマートにしたい方は、ぜひ一度試してみてください。
satokotadesignキャンペーン実施中！
