scroll-behaviorプロパティを使ってCSSのみでページ内リンクをスムーズスクロール

Webページ内でページ内リンクを設置し、対象のコンテンツまで移動させる場合には、動きを滑らかにするためにJavaScript（jQuery）を使ってスムーズスクロールを実装するでしょう。

CSSのscroll-behaviorプロパティを利用することで、JavaScriptを使わずにCSSのみで、ページ内リンクのスムーズスクロールを手軽に実装することができます。

scroll-behaviorは、スクロールするボックスにスクロールが発生した際に、スクロールの振る舞いを設定するプロパティです。

scroll-behaviorプロパティの構文

scroll-behavior: auto: 瞬時にスクロール
scroll-behavior: smooth: スムーズにスクロール

初期値はautoとなります。
また、通常のユーザーが実行するスクロールには影響しません。

以下、scroll-behaviorプロパティのWebブラウザのサポート状況になります。

Can I use（scroll-behavior）
https://caniuse.com/?search=scroll-behavior

IEは今後無視するとして、主要ブラウザの最新バージョンはすべてサポートしています。

一番シンプルな使い方は、以下のように記述していきます。

CSS

html {
  scroll-behavior: smooth;
}

1行だけ追加するだけではありますが、もう少しだけ、prefers-reduced-motionメディア特性を含めた、scroll-behaviorプロパティの最適な使い方がありますので、どのように使うのかをサンプルでご紹介します。

scroll-behaviorプロパティの使い方

サンプルとして、ページ内リンクがヘッダーに固定、各セクションのコンテンツにスムーズスクロールで移動できるといった仕様を用意しました。

まずはHTMLから。

HTML

<header>
  <nav>
    <ul id="page-nav">
      <li><a href="#scroll-target01">scroll-target01</a></li>
      <li><a href="#scroll-target02">scroll-target02</a></li>
    </ul>
  </nav>
</header>

<main>

  <h1>scroll-behavior: smooth;</h1>
  <section>
    <div class="section-conts">
      <h2 id="scroll-target01" class="tgt">Target 01</h2>
      <p>Example text.. Example text.. Example text.. Example text.. Example text.. Example text.. Example text.. </p>
      <p>Example text.. Example text.. Example text.. Example text.. Example text.. Example text.. </p>
    </div>
  </section>
  <section>
    <div class="section-conts">
      <h2 id="scroll-target02" class="tgt">Target 02</h2>
      <p>Example text.. Example text.. Example text.. Example text.. Example text.. Example text.. Example text.. </p>
      <p>Example text.. Example text.. Example text.. Example text.. Example text.. Example text.. </p>
    </div>
  </section>

</main>

ページ内リンクとして、ヘッダーのa要素に「#scroll-target01」「#scroll-target02」と2つ設定しました。
そして、各セクションのh2見出しに、リンク先としてid名を設定します。

続いてCSSです。

CSS

body {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", meiryo, sans-serif;
  font-size: 1.2rem;
  color: #333;
  width: calc(100% - 8%);
  max-width: 1000px;
  background: #efefef;
  margin: 0 auto;
  padding: 5em 4%;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 145, 0, 0.3);
  width: calc(100% - 8%);
  padding: 1em 4%;
  text-align: right;
}

#page-nav li {
  display: inline-block;
  margin: 0 1em 0 0;
}

h1 {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}

h2 {
  font-size: 1.4em;
  font-weight: bold;
  margin: 0 0 1em;
}

section {
  width: 100%;
  height: 100vh;
  padding: 4em 0;
}

a {
  font-size: 1rem;
  font-weight: bold;
  color: currentColor;
}

[id] {
  scroll-margin-top: 3em;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

全体のデザイン、レイアウトは簡単なものにしております。
一番最後にあるメディアクエリの記述にて、html要素に「scroll-behavior: smooth;」として、スクロールの振る舞いを指定します。

メディアクエリでは、prefers-reduced-motion属性を設定しています。
prefers-reduced-motionメディア特性は、ユーザーがアニメーションや動作を最少化するよう要求したことを検出するために使用します。
iPhoneでは、操作中のアニメーションの動きを減らしたいユーザーのために、視差効果の設定があります。Webサイトなどでアニメーションを多用していると、ユーザーによっては見づらかったり、操作しにくかったりします。

prefers-reduced-motionメディア特性については、別の記事（CSSのメディアクエリprefers-reduced-motionメディア特性の利用）でご紹介しています。

「scroll-behavior: smooth;」の記述、これだけでもいいですが、ページ内リンク先の要素にピッタリとスクロールしますので、デザイン上少し余白がほしいところです。
そこで、一緒にscroll-margin-topプロパティを使います。
scroll-margin-topは、スクロールスナップ領域の上側のマージンを定義するプロパティになります。

サンプルでは、セレクタ「[id]」に対して「scroll-margin-top: 3em;」としています。
[id]はidが付いているすべての要素が対象となります。（ページ内リンク先はidで指定するため）
「3em」の値はご自身のデザインに合わせてください。

実際の動きがこちら