CSSのみでページ内リンクのスムーススクロールを実現する方法

CSSのみでページ内リンクのスムーススクロールを実現する方法

CSSのみでページ内リンクのスムーススクロールを実現する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

CSSだけでページ内リンクのスムーススクロールを実装する方法をご紹介いたします。

まだ、サポートしているブラウザは少ないですが、scroll-behaviorプロパティを使った方法です。

スポンサードリンク

CSSのみでページ内リンクのスムーススクロールを実現する方法

ページ内リンクのスムーススクロールを有効化するには、CSSで下記のように指定します。


body {
  scroll-behavior: smooth;
}

たったこれだけで、ページ内リンクをクリックした時に、スルスルっと滑らかに移動するようになります。

scroll-behaviorに指定できる値は「auto」か「smooth」のみで、デフォルト値はautoです。

scroll-behaviorの対応ブラウザ

scroll-behaviorプロパティの対応ブラウザは、以下の通りです。

scroll-behaviorの対応ブラウザ

IEやEdgeはサポートしていないので、クライアントワークで使うのはちょっと厳しいですね。

あとがき

まだまだサポートされているブラウザも少なくクライアントワークでは使えませんが、こんなことまでCSSのみで実現できるようになったのはありがたいですね。

IEやEdgeなどを切り捨てても構わないという場合は、scroll-behaviorによるスムーススクロールを実装してみてはいかがでしょうか。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。