JQueryでスムーズスクロール

今回はJQueryでスムーズスクロールする表現についてです。

通常、ページ内リンクをする場合

 <div id="link"></div>

というIDに

<a href="#link"></a>

というリンクを指定してページ内の移動を指定するのですが。

この状態のままだとクリックした時の動きが急なので見づらく、ページを見ている側に対して優しくありません。
それに対してjQueryを使うことによって下に流れるようなスムーズなスクロール表現ができます。

まずhead内にJQueryを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

その直下にスクリプトを書きます。

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

これで完成です。

設定としては下記の箇所

// スクロールの速度
	  var speed = 500; // ミリ秒

関数「speed」内の数字を変えることによってスクロール速度を変える事ができます。