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

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

CSS

html {
  scroll-behavior: smooth;
}

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

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

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

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

JavaScriptでスムーススクロールを実装する方法を解説します。jQueryを使わないバニラJavaScriptでの実装方法を紹介します。

この記事を書いた人