CSSのscroll-behaviorプロパティを使ってスムーススクロールを実装する方法

「CSSだけでもスムーススクロールって実装できるのかな？」
「CSSを使ってスムーススクロールを実装する方法について知りたい！」

上記のように考えている方に向けて、CSSのscroll-behaviorプロパティを使ってスムーススクロールを実装する方法について解説していきます。

以上の項目について解説します。

この記事を読むことで、CSSを使ってスムーススクロールを実装する仕組みについて理解できるので、ぜひチェックしてみてくださいね！

CSSで実装できるスムーススクロールとは

Webサイトを見るとき、冒頭にある目次の項目をクリックすると、その項目に移動する動きをよく目にするのではないでしょうか。

スムーススクロールとは、Webページ内で連動しているリンクと、リンク先の動きを滑らかにする機能のことです。

スムーススクロールを実装することで、ページをスクロールしながらリンク先の項目までたどり着くので、ページのボリュームを把握できます。

scroll-behaviorを使ってスムースすクロールを実装する方法

scroll-behaviorとは、スクロールが実行されたときの処理を設定できるCSSプロパティで、指定できる値は2種類あります。

スムーススクロールを実装するには、リンク先まで滑らかにスクロールするsmooth値を指定します。

サンプルコード

      <style>
        html {
          scroll-behavior: smooth;
        }
        #test1{
          height:500px;
          background-color: cadetblue;
        }
        #test2{
          height:500px;
          background-color: rgb(160, 99, 95);
        }
        #test3{
          height:500px;
          background-color: rgb(160, 95, 114);
        }
      </style>
    <ul>
      <li><a href="#test1">1</a></li>
      <li><a href="#test2">2</a></li>
      <li><a href="#test3">3</a></li>
    </ul>
    <div class="scroll-box">
      <section id="test1">
        <h2>テスト1</h2>
      </section>
      <section id="test2">
        <h2>テスト2</h2>
      </section>
      <section id="test3">
        <h2>テスト3</h2>
      </section>
    </div>  

HTMLタグを指定し、scroll-behavior:scroll;を一行入力するだけでスムーススクロールを実装できます。

CSS1行で簡単にスムーススクロールを実装できる

今回は、CSSを使ってスムーススクロールを実装する方法について解説してきましたが、いかがでしたでしょうか？

以前はjQueryを使って実装することが多かったスムーススクロールですが、CSSのscroll-behaviorプロパティを使うことで簡単に実装できるのです。

中には、scroll-behaviorに対応していないブラウザもあるので、その点を理解して使ってみてくださいね！