2022年05月18日(水)

CSSのみでスムーススクロール実装とアンカーリンクのスクロール位置を調整する方法

• 0
• 2
• 11
• 29

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

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

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

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

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

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

html { scroll-behavior: smooth; }

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

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

値はスムーススクロ...