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

ウェブ制作

今回は、同じページ内のアンカーリンクで、ゆっくりスクロールされる『スムーススクロール』をJavaScriptを使わずに、CSSだけで実装する方法を紹介します。

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

デモ

See the Pen CSSでスムーススクロール by blanket11 (@blanket11hal) on CodePen.

追従ヘッダーがあり、スムーススクロールした場合のサンプルです。
ポイントはHTMLタグに指定したスタイルだけです。

なんでこうなるのか解説してきます。

解説

html {
  scroll-behavior: smooth; //スムーススクロールにする
  scroll-padding-top: 50px; // 追従ヘッダーがある場合
}

1行でスムーススクロール『scroll-behavior』

htmlタグに対して、『scroll-behavior: smooth』を記述だけで
スムーススクロールを実現できます。

なんと、JavaScriptは必要ありません!

scroll-behavior – CSS: カスケーディングスタイルシート | MDN

ただ、注意が必要なのはIEが使えないので対応ブラウザに注意が必要です。

追従ヘッダーがあるなら『scroll-padding-top』

もし、追従ヘッダーがあるWebサイトの場合、
htmlに『scroll-padding-top: ○○px』と指定することで、
指定した分のスクロール位置をずらすことができます。

scroll-padding-top – CSS: カスケーディングスタイルシート | MDN

こちらも、IEはもちろん未対応です。
対応ブラウザに制限があるの注意が必要です。

まとめ

新しい、CSSをしようすることで、JavsScriptを使わずに、スムーススクロールを実現できることを紹介しました!

今では、一部の normalize CSSでも取り込まれていたりします。

IE11がまだもう少し対応ブラウザとしてるところもまだまだあると思うので完全移行はまだできないかもしれませんが、今後はこれを使うことになると思います。

タイトルとURLをコピーしました