■お問い合わせ ■当サイトへのリンク ■サイト仕様 ■

jQueryでページの先頭にスクロールさせる

A要素のhref属性に#を指定されたリンクをクリックするとWebページの先頭に移動するわけですが、アドレス末尾に#がつくのを好まない人もいるんじゃないかと思います。そこでjQueryを利用してページの先頭までスクロールして戻すコードを書いてみました。

導入方法は簡単です。まずはHEAD要素内に以下の行を追加してjQueryを利用できるようにします。

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

ここではGoogleからjQueryを読み込んでいますが、自分のWebサイトにjQueryを置いて、それを読み込ませるようにしても問題ありません。

続けてjQueryを読み込ませた次の行へ以下のようにJavaScriptを記述してください。汎用性とメンテナンス性を考慮し、外部JavaScriptファイルにしておき、それを読み込んだほうがよいでしょう。

<script type="text/javascript">
$(function() {
	$('a[href=#]').click(function() {
		$('html, body').animate({scrollTop:0},'fast');
		$('html, body').animate({scrollLeft:0},'fast');
		return false;
	});
});
</script>

ページの先頭へのリンクにクリックイベントを割り当て、アニメーションでスクロールアップとスクロールレフトを行ないます。サンプルのコードは'fast'を指定しているため200ミリ秒です。'slow'を指定すると600ミリ秒となります。数値で400などと指定してもかまいません。ユーザーを待たせすぎないような範囲で指定しましょう。

最初は$('body').animate({scrollTop:0},'fast');と書いていたら、普段メインで使っているGoogle Chromeでしか動かなくてしばらく悩みました。どうもFirefoxやInternet Explorerではhtmlのほうを使わないといけないようで……。

ブラウザはFirefox、Google Chrome、Internet Explorer 6/7/8/9、Operaを用いて表示を確認しました。