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で返信する場合はこちらから。