ページ内リンクでスムーズスクロールする - スクロールアニメーションするリンクの作成 (jQuery 利用)

事前準備

jQueryを入手します。http://jquery.com/からダウンロードできます。

コード

以下のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-2.0.2.js"></script>

  <script type="text/javascript">
    $(function() {
      $(".scroll").click(function(event){
       event.preventDefault();
      var url = this.href;
      var parts = url.split("#");
      var target = parts[1];
      var target_offset = $("#"+target).offset();
      var target_top = target_offset.top;
      $('html, body').animate({scrollTop:target_top}, 500);
      });
    });
  </script>
</head>
<body>
  <a href="#section1" class="scroll">セクション1へ</a><br />
  <a href="#section2" class="scroll">セクション2へ</a><br />
  <a href="#section3" class="scroll">セクション3へ</a><br />
  <hr />

  <a id="section1">セクション1</a>
  <div style="height:600px">コンテンツ</div> 

  <a id="section2">セクション2</a> 
  <div style="height:600px">コンテンツ</div> 

  <a id="section3">セクション3</a> 
  <div style="height:600px">コンテンツ</div> 
</body>
</html>

解説

JavaScript (jQuery) のコードは下記になります。

    $(function() {
      $(".scroll").click(function(event){
       event.preventDefault();
      var url = this.href;
      var parts = url.split("#");
      var target = parts[1];
      var target_offset = $("#"+target).offset();
      var target_top = target_offset.top;
      $('html, body').animate({scrollTop:target_top}, 500);
      });
    });

$(".scroll").click(function(event){
});

を記述することで、scroll クラスを持つ要素に対するクリックイベントを実装しています。

クリックイベント内の実装では、

  event.preventDefault();

により、イベント処理の中断をします。preventDefault についてはこちらの記事を参照してください。

  var url = this.href;
  var parts = url.split("#");
  var target = parts[1];

クリックしたaタグのhref属性の値を取り出します。取り出し後 "#" でsplitして#より後ろの文字列を取得します。

  var target_offset = $("#"+target).offset();

"#(アンカー名)" の要素のページ上部からのオフセットを求めます。リンク先のアンカーの位置が取得できます。

  var target_top = target_offset.top;
  $('html, body').animate({scrollTop:target_top}, 500);

アンカーの位置までスクロールをします。animate メソッドを呼び出すことで、スムーススクロールでスクロールします。

実行結果

HTMLファイルを表示します。下図の画面が表示されます。
ページ内リンクでスムーズスクロールする - スクロールアニメーションするリンクの作成 (jQuery 利用):画像1

[セクション1]リンクをクリックすると"セクション1"の見出しが最上部になるまでスクロールします。

[セクション2]リンクをクリックすると"セクション2"の見出しが最上部になるまでスクロールします。
ページ内リンクでスムーズスクロールする - スクロールアニメーションするリンクの作成 (jQuery 利用):画像3

[セクション3]のリンクをクリックした場合も同様です。