jQuery入門講座サンプル-スムーススクロール(2)

スムーススクロール(2)

概要

jQueryでページをスクロール

jQueryでスクロールするためには、目的地（アンカー）の座標を取得する必要があります。座標が取得できたら後はアニメでスクロールさせるだけです。

解説

目的地の取得

まずはクリックされたa要素のhref属性（つまり目的地）がどこかを取得しなければなりません。
サンプル（scroll2/01.html）のソースを開き、jQueryが以下の様に記述されていることを確認して下さい。

attrメソッドを利用してクリックされた要素（this）のhref属性の値を取得しています。そして、取得した値は変数myHrefに代入してアラートで表示するようにしました。「return false」の後に書かないようにして下さい。return文は実行すると、すぐにfunctionから抜けるためreturnの後の処理は実行されません。

$("a[href^=#]").click(function() {
	var myHref= $(this).attr("href");
	alert(myHref)
	return false;
});

結果としてページ内リンクをクリックすると、クリックした要素のhref属性の値が表示されます。

目的地の位置を取得

目的地が取得できたら、その要素の座標を取得します。サンプル（scroll2/02.html）のソースを開き、jQueryが以下の様に記述されていることを確認して下さい。

$("a[href^=#]").click(function() {
	var myHref= $(this).attr("href");
	var myPos = $(myHref).offset().top;
	alert(myPos)
	return false;
});

ポイントは3行目です。2行目で取得した目的地「myHref」をセレクタとして利用し、それにoffsetメソッドを利用して座標を取得します。offsetメソッドで返される座標はobjectオブジェクトとなっており、top（X座標）とleft（Y座標）の2つのプロパティを持っています。

そのため取得したいプロパティをoffsetメソッドの後に指定する必要があります。今回は上からの座標を取得するためtopを指定しました。取得した座標は変数myPosに代入して4行目で表示するようにしているため、ページ内リンクをクリックすると目的地の座標が表示されます。

スクロールはアニメで可能

jQueryでページをスクロールさせるにはanimateメソッドを利用して、scrollTop属性の値を変更します。サンプル（scroll2/03.html）のソースを開き、jQueryが以下の様に記述されていることを確認して下さい。

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

ポイントは4行目です。animateメソッドでscrollTop属性の値を3行目で取得した座標に設定しています。そのためアニメで目的地までスクロールするようになります。セレクタはbodyだけでも大丈夫だと思うのですが、念のためhtmlも入れておきました。

メモ

スムーススクロールのデメリット

スムーススクロールは「return false」でブラウザの機能をOFFにしているため、ページ内リンクをクリックしてもURLが変更されません（本来であれば#アンカー名が追加されます）。その結果、アンカーにブックマークできません。もし長大なページでアンカーへのブックマークが考えられるようなケースでは、このスクロールの利用を避ける方が良いかもしれません。
※javaScriptで動的にURLの表示を変更することは可能なので、そのような処理を追加すれば対応可能かもしれません。

これでスムーススクロールの説明は終わりです。次回からはタブメニューについて説明していきます。

次のページ：タブメニュー(1)