CSSだけでスムーススクロールを実装する
公開：2026.01.24
アンカーリンクをクリックした際、通常は押した瞬間にリンク先にパッと移動します。
それを、リンク先まで滑らかにスクロールさせて移動するように設定してみます。
今回使用するCSSはこちら
html{
scroll-behavior: smooth;
}上記のように、htmlに「scroll-behavior: smooth」を指定します。
これでページ内アンカーリンクがスムーススクロールになります。
注意点
ヘッダーメニューを追従させているようなWEBサイトの場合、ヘッダーがアンカーリンク先のコンテンツに被ることがあります。
ヘッダーとコンテンツが被らないように、次のような3つの設定のいずれかをオススメします。
例1.ヘッダーの高さ分padding-topを指定する
次のようなCSSで、ヘッダーの高さ分のpaddingを指定する共通のクラスを作ります。
端末のサイズでヘッダーの高さが変わることを想定して、メディアクエリを使いました。
@media screen and (max-width: 1199px) {
.anchor-top {
padding-top:60px;
}
}
@media screen and (min-width: 1200px) {
.anchor-top {
padding-top:120px;
}
}HTMLは次のようなコードになります。
<p><a href="#testid">アンカーリンク</a></p>
ここに何かしらのコンテンツが入っているイメージ
<div id="testid" class="anchor-top">リンク先</div>これで、アンカーリンクで遷移したときに、コンテンツ上部に指定した高さ分の余白ができるようになります。
ただ、毎回この「anchor-top」というクラスを設定しなければならないというところが面倒かもしれません。
例2.「:target::before」で調整する
アンカーリンク先のidがURLに含まれている場合、「:target::before」を使うことができるようです。
まず、次のようにCSSを設定します。
これで、アンカーリンクの遷移先に指定した高さ分の余白ができます。
:target::before {
content:"";
display:block;
height:60px;/* ヘッダーの高さ */
margin-top: -60px;/* heightに指定した高さ */
}「:target::before」を使うときに少し注意が必要そうなところがあるので、その説明です。
次のHTMLを例に説明します。
<p><a href="#testid">アンカーリンク</a></p>
ここに何かしらのコンテンツが入っているイメージ
<div id="testidA" style="background-color:#fff;">前</div>
<div id="testid" style="background-color:#fc0;">リンク先</div>
<div id="testidB" style="background-color:#fff;">あと</div>アンカーリンクの遷移先は、基本次のような表示になっています。
しかし、リンクをクリックして、URLが「https://customizatips.com/〇〇#testid」という形になると…
擬似要素「:target::before」が実体化したため、遷移先のアンカーリンク部分の高さ分、黄色い背景色の面積が広くなりました。
位置自体は「margin-top: -60px」で調整しているため変わらないのですが、場合によってはレイアウトが崩れるので注意が必要です。
例3.「scroll-margin-top」で調整する
基本的な設定は例1と同じです。
下記のようにCSSとHTMLを設定します。
@media screen and (max-width: 1199px) {
.anchor-top {
scroll-margin-top: 60px;
}
}
@media screen and (min-width: 1200px) {
.anchor-top {
scroll-margin-top: 120px;
}
}<p><a href="#testid">アンカーリンク</a></p>
ここに何かしらのコンテンツが入っているイメージ
<div id="testid" class="anchor-top">リンク先</div>例1では「padding-top」で調整したため、背景に何か指定されているときの調整が面倒になる可能性がありました。
ですが、「scroll-margin-top」での指定だとレイアウトに影響が出ないようです。
アンカーリンクの遷移先に「scroll-margin-top」の設定がないと動きません。
そのため、今回の「anchor-top」のように「scroll-margin-top」を設定した共通のクラスを毎回設定するという手間はあります。
ですが、レイアウト調整の手間は省けそうですね。
まとめ
手軽にスムーススクロールを実装したいときは、「scroll-behavior: smooth」がオススメですよ、という記事でした。
スクロール位置は今回CSSで設定しましたが、jsを使うとスムーススクロールとスクロール位置の両方を一括で設定できます。
HTMLとCSSで毎回調整するのが面倒な場合はjsがオススメですね。
今回の参考サイト
