ページ内でスムーススクロールをする際は今まではJavaScriptを使って実装をすることが多かったですが、最新のモダンブラウザではCSSだけで簡単に実装することができます。

それに加えて、アンカーリンクでスクロールする際に固定ヘッダーがあったりするとスクロールを止める位置の調整がめんどうだったりしますが、それも最新のモダンブラウザでは簡単にCSSで操作することができます。

今回はCSSだけでスムーススクロールを実装する方法と、アンカーリンクのスクロール位置を調整する方法を備忘録メモとして紹介してみます。

CSSのみでスムーススクロール

CSSのみでスムーススクロールを実装するには「scroll-behavior」プロパティの「smooth」を使用します。

ページ全体にスムーススクロールを実装する場合はhtmlタグに対して「scroll-behavior」プロパティを指定します。

html {
	scroll-behavior: smooth;
}

これだけでページ内にスムーススクロールを実装させることができます。

「scroll-behavior」はページ内のスクロールエリアに対してのスクロールの振る舞いを設定できるプロパティです。

値はスムーススクロールする「smooth」と、瞬時にスクロールする「auto」があります。

このプロパティを使えば簡単にスムーススクロールを実装できますが、スピードやイージングの指定はできないようです。

「scroll-behavior」の対象ブラウザは以下でIEは対応していません。

CSSでアンカーリンクのスクロール位置を調整

アンカースクロールの位置調整をする方法は、以前「CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法」として、before疑似要素を使った方法を紹介しましたが、「scroll-margin-top」プロパティを使うことでもっと簡単に指定できるようになります。

section {
	scroll-margin-top: 100px;
}

「scroll-margin-top」プロパティではアンカースクロールで止まる位置の上側のマージンを指定することができます。

固定ヘッダーの高さが80pxだった場合、「scroll-margin-top」の値を100pxで指定すると固定ヘッダーから下に20pxの余白が空いた状態でスクロールが止まるようになります。

スクロール位置のマージン調整はほかにも「scroll-margin-bottom」「scroll-margin-left」「scroll-margin-right」があり、「scroll-margin-left」は横スクロールの制御で使う機会があるかもしれませんが、「scroll-margin-bottom」「scroll-margin-right」はあまり使う場面の想像がついていないです…

「scroll-margin-top」の対象ブラウザは以下でIEは対応していません。

「scroll-behavior」と「scroll-margin-top」の実装例

「scroll-behavior」と「scroll-margin-top」の2つを使ってCSSのみでスムーススクロールのアンカースクロールを実装した動作例は以下になります。

See the Pen
CSS Smooth Scroll
by BLACKFLAG (@BlackFlag)
on CodePen.

2つのプロパティともJavaScriptで実装するよりも手軽に使えるので、今後スクロール動作を操作するには活用できるプロパティだと思います。

CSSのみでスムーススクロール実装とアンカーリンクのスクロール位置を調整する際にぜひ…