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

このページのタグ:[JavaScript] [ページ内リンク] [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>

実行結果

HTMLファイルを表示します。下図の画面が表示されます。


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


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


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


登録日 :2013-06-27    最終更新日 :2016-02-18
このページのタグ:[JavaScript] [ページ内リンク] [jQuery]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)