【JS不要！】CSSだけでスムーススクロールを実装する方法

RELEASE / 2025.4.24 UPDATE / 2025.04.24

css

スムーススクロール

Webサイト内でページ内遷移する際、スルスルっとスクロールアニメーションしながら移動するスムーススクロール。
昔からWebサイト制作している人からすると、JavaScriptやjQueryを使って実装するものと思っていのではないでしょうか。

実はこのスムーススクロール、現在はCSSだけで実装することが出来るようになってます。
そこでこの記事ではJavaScriptやjQueryを使わず、CSSだけでスムーススクロールを実装する方法をご紹介したいと思います。

昔ながらのjQueryを使いスムーススクロールを実装する方法はこちらの記事でご紹介しています。

この記事の目次を表示

1 CSSだけでスムーススクロールを実装する方法
2 メリットとデメリット
- 2.1 メリット
- 2.2 デメリット
3 まとめ

CSSだけでスムーススクロールを実装する方法

早速ですが、CSSだけでスムーススクロールを実装するには以下の記述をします。

html{
    scroll-behavior: smooth;
}

たったこれだけです。
これだけでスムーススクロールを実装することができます。
実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

メリットとデメリット

ここからはCSSだけでスムーススクロールを実装する場合のメリットとデメリットをまとめてみました。

メリット

まずはメリットのご紹介です。

ブラウザの設定に影響されない

JavaScriptやjQueryでスムーススクロールを実装する場合、閲覧するブラウザでJavaScriptの設定が有効になっている必要がありました。
これは制作者側ではどうすることも出来ない設定なので、この設定が無効になっている環境ではスムーススクロールが機能しません。
その点、CSSだけで実装する場合は、この心配はありません。
2025年4月現在、主要ブラウザはこのプロパティをサポートしているので多くの環境でスムーススクロールを実装することが出来ます。

1行の記述で実装可能

なんと言ってもCSSの記述1行で実装可能です。

html{
    scroll-behavior: smooth;
}

jQueryの場合だと最低でも2、3行のコードを書く必要があります。
また、プログラムなので動作の際、若干の負荷がかかります。

デメリット

続いてデメリットのご紹介です。

アドレスバーに#◯◯◯が付く

CSSでスムーススクロールバーを実装するとアドレスバーに#◯◯◯が付きます。
例えば、遷移先がid="company"の場合、アドレスバーの部分が遷移の際、https://xxxx.com#companyとなります。
気にならないといえば気にならないですが、CSSで実装する場合の特徴ともいえます。
人によってはデメリットと捉える人もいるかもしれません。