【CSSのみでスムーススクロール】scroll-behaviorプロパティの使い方

1ページのサイトなどではナビゲーションの項目をクリックすると、
該当箇所までぐいーんと飛ばしてくれる
スムーススクロールが導入されることが多いですよね。

jQueryやプラグインなどで実装されることも多いと思いますが、
今回はCSSだけで実装できるscroll-behaviorプロパティの使いかたを
まとめてみたいと思います。

こんなかんじのデモを用意しました。

See the Pen
rNxwbrp by notebook (@orange-notebook)
on CodePen.

scroll-behaviorプロパティは
Internet Explorer、Safari、iOS Safari等では対応していないので、
ご覧いただくブラウザによっては動かないかもしれません。

動かない場合は、ぐいーんとした移動のエフェクトがなく、
該当箇所まで瞬間的にジャンプするかんじになるかと思います。

では作り方をみていきたいと思います。

クリックできる目次

scroll-behaviorプロパティの使い方
- HTML
- CSS
おわりに

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

HTML

HTMLでは通常と同様、ナビゲーションの項目と該当箇所を紐づけておく必要があります。
そのため、ナビゲーションのaタグのhref属性に該当場所のid名を指定します。

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="home">
  <h2>Home</h2>
</section>
<section id="about">
  <h2>About</h2>
</section>
<section id="services">
  <h2>Services</h2>
</section>
<section id="contact">
  <h2>Contact</h2>
</section>

今回はナビゲーションの項目の各セクションの場所まで飛ばしたいので、
「Home」「About」「Service」「Contact」のaタグのhref属性に、
それぞれ「#home」「#about」「#service」「#contact」を指定します。

また各セクションも同様に、
id名をそれぞれ「home」「about」「service」「contact」と振っていきます。