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

Image

ページ内を移動するリンクをクリックした際にゆっくりとスクロールしていくアニメーションを見たことがあるかと思います。

jQueryで簡単に実装することができますのでその方法をご紹介したいと思います。

jQueryを読み込む

GoogleのCDNを利用してjQueryを読み込みます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

準備はこれでばっちりですので、本題に戻ります。

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

まずはスクリプトを見てみましょう。

<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>

一番上の var landing 行では変数を定義して代入します。代入する値には移動先の要素を指定します。

$(‘#button’).click の #buttonの部分にはクリックして移動するアクションを発生させる要素を指定します。

{ scrollTop : 移動先(上で指定した変数) } の要素となるようにして、’slow’ の部分にスクロールスピードを指定します。設定できる値には以下のものがあります。

slow

normal

fast

ミリ秒 (例:1000)

後はスクリプトに指定した要素をHTMLで記述します。

指定した発着点を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

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

SHARE