【CSS】だけでスムーススクロールを実装する（JavaScript不要）

こんにちは、さち です。

今回は、CSS だけ（JavaScript を使わない）でページのスムーススクロールを実装する方法について書いていきます。

使い方

ソース

HTML

<a href="#div3">div3 にジャンプ</a>

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>

CSS

html {
  scroll-behavior: smooth;/* スムーススクロールの実装 */
  scroll-padding-top: 100px;/* 移動先のオフセット */
}

CSS の記述はこれだけ。とても簡単ですね。

移動先のオフセットが必要ない場合、scroll-padding-top は記述しなくても大丈夫です。

結果

「div3 にジャンプ」をクリックすると、ブラウザーの画面が「div3」要素の 100px 上までスムーススクロールをします。

スムーススクロールの「時間」「スピード」などの調整はできず簡易的な実装ですが、こだわりがなければとりあえずこれで十分な気はします。

各ブラウザーの対応

「Can I use...」によると、各ブラウザーの対応はこんな感じ。

	scroll-behavior: smooth;	scroll-padding-top
Chrome	61 以降	69 以降
Edge	79 以降	79 以降
Safari	15.4 以降	14.1 以降
Firefox	36 以降	68 以降
Opera	48 以降	56 以降

Safari だけ2022年5月頃からの対応で少し遅いので注意。

ただ、非対応ブラウザーの場合でも画面移動（ジャンプ）自体はするので、あまり対応を気にしなくても大丈夫な気もします。

CSS property: scroll-behavior: smooth - Can I use...
CSS property: scroll-padding-top - Can I use...