HTMLとCSSだけでページ内リンクにスムーススクロールさせる方法

スムーススクロールの実装といえば、JavaScript（jQuery）の$('a[href^="#"]')から始まる記述で実装する人も多いと思いますが、実はCSSに以下の記述をするだけで実装できます。

CSS (.css)

html {
  scroll-behavior: smooth;
}

本当にこれだけです。

JavaScriptと違ってスクロールのスピードを調整できないのが欠点ですが、scroll-behavior: smooth;のスムーススクロールは一般的なサイトで違和感なく使える丁度いいスピードに設定されています。

今ご覧いただいているブログもscroll-behavior: smooth;でスムーススクロールを実装していますので、下のボタンをクリックして挙動を確かめてみてください。

いかがでしょうか、非常に便利なプロパティなので積極的に使ってみてね！

固定ヘッダーにアンカーリンク位置が重なる問題の解決方法

ついでに固定ヘッダーにアンカーリンク位置が重なる問題についても便利なプロパティをご紹介しておきます。

今まではアンカーリンク先の要素に対して「ヘッダーの高さ分のマイナスマージン」と「同じ高さのパディング」を指定してスクロール位置を調整していましたね。

CSS (.css)

.tobisaki {
  margin-top: -60px;
  padding-top: 60px;
}

これでスクロール位置がヘッダーに隠れないようになるけど、リンク先の要素にデザイン用のmarginやpaddingを指定してたりすると調整がメンドい！

アンカーリンク用の要素を新しく作る手もありますが、次で紹介する方法ならそんなことを考える必要もありません。

CSSのどこかに以下の記述をするだけでオッケー。

CSS (.css)

*:target {
    scroll-margin-top: 60px;
  }

Check!!

*:targetに指定しているscroll-margin-top: 60px;はヘッダーの高さだよ！

上のコードではページ内リンクの飛び先となり得る全ての要素（*:target）に対して、scroll-margin-topというプロパティでスクロール位置の上に60px（ヘッダー高さ）の余白を作っています。

:targetはページ内リンクで飛び先となる要素に対してスタイルを適用する疑似クラスだよ！
※ <a>タグではなく、あくまで飛び先の要素に使う点に注意。

「なるほど、よくわからん」となっても良いので、とりあえず上のコードの記述を使ってみてね！

HTML・CSSの進化が進むにつれて、今までJavaScriptに依存していたギミックが手軽に作れるようになってきて嬉しい限りですね！

実はアコーディオンやモーダルウィンドウもJavaScript無しで実装できるようになっていまして、近い内に当ブログでご紹介できればと思います。

それではまた別の記事でお会いしましょう！

スムーススクロール（テスト）の目的地

HTMLとCSSだけでページ内リンクにスムーススクロールさせる方法のテスト用セクションです。
元の位置に戻りたい方は以下のボタンをクリック！