旧ブログ(ISSEN)から移行しました

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

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

成岡拓哉
成岡拓哉1分で読めます

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

CSS
html {
  scroll-behavior: smooth;
}

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

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

"scroll-behavior" | Can I use... Support tables for HTML5, CSS3, etc

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

caniuse.com

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

【Javascript】Javascriptでゆっくりな自動スクロールを実装!

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

この記事を書いた人

成岡拓哉
成岡拓哉

TOKOSのフロントエンドエンジニア。企業サイトやLPの制作を担当しています。このブログではWeb制作初学者向けに、実務で役立つ知識を分かりやすく発信しています。ビールが好きです🍺