ページ内リンクや「トップへ戻る」ボタンをクリックしたとき、瞬時に移動するのではなく滑らかにスクロールすると、ユーザー体験が向上します。CSSのscroll-behaviorプロパティを使えば、JavaScriptを使わずに簡単にスムーズスクロールを実装できます。
scroll-behaviorの基本
scroll-behaviorはスクロール操作の挙動を指定するCSSプロパティです。適用対象はスクロール可能な要素やhtml, bodyです。
- auto：デフォルトのスクロール（即座に移動）
- smooth：滑らかなスクロール
ページ全体にスムーズスクロールを適用
サイト全体にスムーズスクロールを有効にする場合は、html要素に指定します。
html {
scroll-behavior: smooth;
}
これで、ページ内リンク（例：<a href=”#section1″>）をクリックしたときに滑らかに移動します。
特定の要素にだけ適用する
スクロール可能な特定の要素にのみスムーズスクロールを設定することもできます。
.scroll-box {
width: 300px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
この場合、.scroll-box内のリンクやJavaScriptによるscrollTop操作がスムーズに動きます。
JavaScriptとの併用
scroll-behaviorをCSSで指定しておくと、JavaScriptでのscrollIntoViewにも自動的に反映されます。
document.getElementById('target').scrollIntoView({
behavior: 'smooth'
});
ただし、JS側でbehaviorを明示的に指定すれば、CSSの設定に関わらず個別に制御可能です。
対応ブラウザ
scroll-behaviorは主要なモダンブラウザでサポートされています。Safariは比較的対応が遅かったですが、現在では最新版で利用可能です。古いブラウザ対応が必要な場合は、JavaScriptによるスムーズスクロールの実装を検討します。
まとめ
scroll-behaviorを使えば、数行のCSSで簡単にスムーズスクロールを実現できます。サイト全体に適用するだけでなく、スクロールボックスなど特定要素に限定する使い方も可能です。シンプルでパフォーマンスに優れた実装のため、まずはCSSでの対応を検討するとよいでしょう。
