Webサイトでスムーズなスクロールを実装する場合、通常はJavaScriptを使用することが多いですが、実はCSSだけでもスムーススクロールを実現できます。
今回はCSSのscroll-behaviorプロパティを使ったスムーススクロールの実装方法を解説します。
scroll-behavior プロパティとは？
scroll-behaviorは、スクロールの挙動を指定するCSSプロパティです。
特にhtml要素に適用するとページ全体にスムーススクロールを反映させることができます。
使用可能な値
auto（デフォルト）：通常のスクロール動作smooth：スムーズなスクロールを適用
CSSでスムーススクロールを実装する方法
CSSでのスムーススクロールは特別難しい指定をする必要はなく、下記のコードを記述するだけです。
この記述をするだけで、ページ内リンク（<a href="#section"> など）をクリックした際にはコンテンツまでスムーズに遷移するようになります。
html {
scroll-behavior: smooth;
}動きとなるとJavaScriptを組まないと…と思ってしまいがちですが、最近はCSSもかなり発展してきているので、CSSの記述だけで実装できる内容も増えてきています。
まとめ
昔はJavaScriptで行わなければならなかったスムーススクロールも今やCSSだけで完結するようになりました。時代の変化ってすごいですね。
ぜひ、参考にしてみてください！
