ページ内でスムーススクロールをする際は今までは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のみでスムーススクロール実装とアンカーリンクのスクロール位置を調整する際にぜひ…