【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

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

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら