【jQuery】ページ内リンクをス滑らかなムーズスクロールに変更する

こんにちは、Ryohei（@ityryohei）です！

本記事では、jQueryを使ってページ内リンクをスムーズスクロールに変更する方法をご紹介しています。

ページ内リンクを滑らかにスクロールするようにしたいんだけど、どうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

jQueryを読み込む

本記事の内容はjQueryを使用しているため、jQuery本体のファイルを読み込む必要があります。ここではCDNを利用してjQuery本来のファイルを読み込みます。

CDNはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワーク経由で提供されるウェブコンテンツを指します。ネットワークに接続されている機器であれば気軽に利用することができます。CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryの本体ファイルは下記の記述で読み込むことができます。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

これで前準備が整いましたので、本題のスムーズスクロールを解説していきます。

発着点とスクロールスピードを設定する

まずはスクリプトをご紹介します。下記はid属性にbuttonという値を持つ要素をクリックすると、id属性にtargetを持つ要素の位置まで滑らかにスクロールするスクリプトです。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(document).ready(function(){
  var target= $('#target').offset().top;
  $('#button').click(function(){
    $('html,body').animate({ scrollTop : target}, 'slow');
        return false;
  });
});
</script>

targetの変数に移動先の要素を指定します。#buttonにはクリックイベントを設定する要素をセレクターで指定します。{ scrollTop : 移動先(上で指定した変数) } の要素とすることで、ボタンをクリックした際に指定した要素まで滑らかにスクロールすることができます。slowの部分にスクロールスピードを指定することができ、指定できる値には下記があります。

slow
fast
ミリ秒（1秒 = 1000）

指定した発着点をHTMLで記述する

今回はbuttonタグとh1タグを使って記述してみます。buttonタグをクリックするとh1タグの場所までゆっくりと移動するようにします。

<button id="button">これをクリックすると</button>
<h1 id="landing-point">ここまで移動する</h1>

以下サンプルです。コピペでも動くと思いますので、さくっと実装したいときなどにお使い下さい。

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script><!--
    $(document).ready(function(){
      var landing = $('#landing-point').offset().top;
      $('#button').click(function(){
    	  $('html,body').animate({ scrollTop : landing}, 'slow');
            return false;
      });
    });
    // -->
    </script>
    <style>
      #button{padding: 20px; width: 100%;}
      #blank-space{height: 2000px;}
      #landing-point{text-align: center;}
    </style>
  </head>
  <body>
    <button id="button">これをクリックすると</button>
    <div id="blank-space"></div>
    <h1 id="landing-point">ここまで移動する</h1>
    <div id="blank-space"></div>
  </body>
</html>

Demo

デモから動きが確認できます。