知らないと損する！CSSだけでイージングスクロールを簡単に実装する方法

こんにちは。櫻井です。
イージングスクロールは、ページ内のリンクをクリックした際にスクロールが滑らかに移動する効果を指します。
イージングスクロールを実装することでページ遷移が滑らかになり、サイトの閲覧が快適になったり、サイトの没入感の向上させられたりします。
今まではJSを使わなければ実現できなかったイージングスクロールを今回はJSを使わずにCSSだけで実装してみます。

CSS で簡単にイージングスクロールを実装

ページ遷移を滑らかにするにはhtml要素にCSSでscroll-behaviorプロパティを使います。

html {
  scroll-behavior: smooth;
}

See the Pen smooth scroll CSS by knap_develp (@knap_develp) on CodePen.

headerやナビゲーションを追従させたい場合

前述のデモではheaderやナビゲーションを追従した場合コンテンツの上に追従したコンテンツが重なってしまいます。
これを防ぐに、scroll-padding-topプロパティを先ほどのデモに追記します。

html {
  scroll-behavior: smooth;
  scroll-padding-top: 3em; /* 追従させるコンテンツの高さ */
}

3emのところには追従させるコンテンツの高さを入れてください。

See the Pen smooth scroll CSS by knap_develp (@knap_develp) on CodePen.

もし追従させるコンテンツの高さをJSで動的に変更する場合はその高さをJSで取得する必要がありますがそれ以外ではわずか2行でイージングスクロールが実装できました。
昔はJSで何行も書いていたものがこんなに簡単にできるなんて技術の進歩はすごいですね。

参考

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-padding-top