jQueryでスムーススクロール(jQuery v 1.9対応)

2013年2月現在、jQueryのバージョンは1.9なのですが、
以前配布していたスムーススクロールが効かなくなってしまいました。
v 1.9対応のソースコードを紹介します。

スムーススクロールの詳細は以下のページをみてください。

ここでは、修正したソースコードのみを紹介します。

HTMLの記述

HTMLを以下みたいな感じで記述して、jQueryを呼び出します。

HTMLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <title>テスト</title>
   <link rel="stylesheet" type="text/css" media="all" href="common.css" />
   <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
   <script src="scroll.js" type="text/javascript"></script>
</head>
<body>
<div id="header">・・・</div>
<div id="contents">
   <p>テキストテキストテキスト</p>
   <p>テキストテキストテキスト</p>
   <p>テキストテキストテキスト</p>
   <p><a id="sample">サンプル</a></p>
   <p>テキストテキストテキスト</p>
   <p>テキストテキストテキスト</p>
   <p><a  href="#sample">サンプルへ移動する</a></p>
   <div id="#totop"><a href="#">ページのトップへ戻る</a></div>
</div>
<div id="footer">・・・</div>
</body>
</html>

スムーススクロール用JavaScript

新規にscroll.jsというJavaScriptファイルを作り、以下のように記述します。

JavaScriptコード

$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400;// ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});

昔は、$($.browser.safari ? 'body' : 'html')という記述にしていたのですが、これがv 1.9では有効でなくなってしまっていたようです。よって、$('body,html')というように修正しています。

投稿日:2013年2月11日 | 編集

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top

ホームページ作成に役立つコーナー