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

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

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

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

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

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

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に対応していないブラウザもあるので、その点を理解して使ってみてくださいね！