デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:短編集
2章:診断系コンテンツ
3章:製品抽出系コンテンツ
番外:Simulation Game

スムーススクロール(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の表示を変更することは可能なので、そのような処理を追加すれば対応可能かもしれません。

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