【CSS】【簡単】CSSだけでスムーススクロール

css

スムーススクロールとは、Webページでページ内の特定のリンクへの移動を滑らかにするものです。
Javascriptやそのライブラリを使用して実装するのが一般的ですが、簡単なCSSだけで実装が可能です!

style.css


html { 
 scroll-behavior: smooth;
}

たったこれだけ!
Javascript一切使用せず、スタイルシートに1行追加するだけで実現することができます!

スピードや位置の細かな調整ができないことや、safariなど対応していないブラウザがあるという欠点はありますが、CSSだけで実装できるのは初心者にとってありがたいですね!


参考
使用できるブラウザCan I Use

Javascriptでスムーススクロールした記事はこちらです。

参考
Javascriptでスムーススクロールhttps://blog.to-ko-s.com/