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

Javascriptソース

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

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で簡単実装ページ内スクロール