jQueryで簡単実装ページ内スクロール

Javascript

2010.01.28

最近よく見かける「ページTOP」のスクロールをjQueryでは簡単に実装できます。

Javascriptソース

$(function(){
	$("a[href^=#]").click(function(){
		var Hash = $(this.hash);
		var HashOffset = $(Hash).offset().top;
		$("html,body").animate({
			scrollTop: HashOffset
		}, 1000);
		return false;
	});
});

Javascriptソースの解説

2行目:$("a[href^=#]").click
aタグのクリック設定をしています。
$("a[href^=#]")と設定することで、hrefの最初に「#」があるaタグのみに反応するようにしています。
3行目:var Hash = $(this.hash);
クリックしたhrefの「#」以降の文字列を取得
4行目:var HashOffset = $(Hash).offset().top;
5行目で取得した文字列を$()に代入し、要素を操作します。
offsetで取得した要素のtopの値を取得します。
5-7行目でanimate設定
ページ全体を動かすので、html、body要素を指定します。
scrollTopプロパティに「4行目の変数で取得した要素のtop」の値を代入。
その値まで、スクロールのアニメーションをします。

サンプル

どんな動きをするかは、サンプルでご覧下さい。

  1. Web-Parkのホーム > 
  2. Javascript > 
  3. jQueryで簡単実装ページ内スクロール
オススメ本(既読)
読んでみたい本(未読)

COMMENT!!

COMMENT PLEASE!!

トラックバック

「jQueryで簡単実装ページ内スクロール」のトラックバックURL
http://web-park.org/javascript/scroll100126.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook