[CSSのみ]ページ内リンク（アンカーリンク）をスクロールさせる

CSSのみでスムーススクロールする方法を紹介します。
JavaScriptを使った記事はこちら。

CSS

html {
  scroll-behavior: smooth;
}

「scroll-behavior: smooth;」をスクロールするボックスに設定します。
通常のページであれば「html」に設定すれば問題ありません。

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

scroll-padding-topプロパティでスクロールした後の上部の余白を設定できます。
スクロールした後の要素が上にピッタリくっつかいない様に少し余白を持たせたり、固定ヘッダーを使用しているときに要素が下に隠れてしまわない様に設定しましょう。

プロパティがスクロールするボックスに設定できない可能性があります。
スクロールするボックスとは、スクロールバーが表示されているボックスです。
通常であればhtml要素がこれに当たりますが、例えばスクロール可能なブロックを作成した場合には、このブロックにプロパティを設定する必要があります。

例えば以下の様なoverflow-yを設定したブロックの場合。

.scroll-block {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  height: 500px;
  overflow-y: scroll;
  background-color: #999;
}

<div class="scroll-block">
  <a href="#scroll">ウィンドウ内でスクロール</a>
  <p id="scroll">
    ウィンドウ内でスクロール
  </p>
</div>

<div class=”scroll-block”>がスクロールするブロックなので、ここに「scroll-behavior: smooth;」プロパティを設定します。

一部のブラウザ（主にSafari）ではコード内で使用している「scroll-behavior: smooth;」に対応していないため、スクロールしてくれません。
対応するpolyfillが公開されているので、ぜひ利用しましょう。

polyfillは読み込むだけで完了です。

<script src="smoothscroll.js"></script>

polyfillについては以下でも紹介しています。