CSSのみでスムーススクロールを実装する方法|ページ内リンク・scroll-behavior

今回は、CSSのみでページ内リンクの移動を、スムーススクロールにする方法となります。

CSSのみでスムーススクロールを実装する方法

ページ全体にスムーススクロールを適用

CSSのみでWebページ全体に対して、ページ内リンクの移動をスムーススクロールにするには、以下のようにhtmlタグにscroll-behavior: smooth;指定します。

html{
  scroll-behavior: smooth;
}

scroll-behaviorプロパティについて

scroll-behaviorプロパティでは、ボックス内でページ内リンクによるスクロール移動が発生した際の挙動を指定でき、プロパティの値にはsmoothとautoがあります。

scroll-behavior: smooth;

ボックスにscroll-behavior: smooth;を指定すると、ボックス内でページ内リンクによるスクロール移動が発生した際に、スムーススクロールとなります。

scroll-behavior:auto;

scroll-behavior:auto;を指定した場合は、通常どおり瞬時にページ内リンク先に移動します。

scroll-behaviorプロパティの挙動

以下の例では、スクロールが発生する2つのボックスあり、上のボックスにはscroll-behavior: smooth;を指定し、下のボックスにはscroll-behavior:auto;を設定しています。

ページ内リンクは画面左端のボタンとなり、上の2つがscroll-behavior: smooth;を指定したボックスへの移動となり、下の2つがscroll-behavior:auto;を設定したボックスへの移動となります。

See the Pen scroll-behavior Example by yic666kr (@yic666kr) on CodePen.

利用できるブラウザについて

scroll-behaviorプロパティが対応しているブラウザの最新情報については、参考サイト内のリンク先を参考にしてみてください。

また、今回はCSSのみでスムーススクロールを実装する例でしたが、jQueryを利用した実装方法もあります。詳しくは以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。