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

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.scrollTop( )スクロール位置(Y座標)を取得/設定

構文

要素のスクロール位置(Y座標)を取得返値:数値
jQo.scrollTop( )ver1.2.6〜
要素のスクロール位置(Y座標)を設定返値:jQueryオブジェクト
jQo.scrollTop( 数値 )ver1.2.6〜

機能

引数を設定しない場合は、jQueryオブジェクトで指定した要素のスクロール位置(Y座標)を取得します。スクロールができないケースでは0を返します。

引数を設定した場合はjQueryオブジェクトで指定した要素のスクロール位置(Y座標)を設定します。ブラウザーのスクロール以外にも、cssのオーバーフロー設定によるスクロールも取得/設定できます。

解説

スクロール位置を取得します

サンプル(scrollTop/01.html)を開いてbody内にdiv要素が1つあることを確認して下さい。このdiv要素にはcss設定でオーバーフローの設定がされ、スクロールバーが表示されます。

jQueryは以下の様に記述され、scrollイベントを利用して、div要素がスクロールされたらscrollTopメソッドによってスクロール位置を取得しtextメソッドを利用してp要素に表示します。

$("div").scroll(function(){
	var st = $("div").scrollTop();
	$("p").text("scrollTop: " + st);
});

結果として、div要素のスクロール量に応じて数値が表示されます。

ブラウザのスクロール位置を取得します

セレクタに「window」を利用することで、ブラウザのスクロール位置も取得できます
サンプル(scrollTop/02.html)を開いてbody内の構成を確認してください。ブラウザがスクロールできるように大きなdiv要素が10個あります。またスクリール位置を表示するために、位置を固定したdiv要素(injのid属性のdiv)を用意しました。

jQueryは以下の様に記述され、scrollイベントを利用して、ブラウザがスクロールされたらscrollTopメソッドによってスクロール位置を取得しtextメソッドを利用して固定したdiv要素に表示します。

$(window).scroll(function(){
	var st = $(window).scrollTop();
	$("#inj").text("scrollTop: " + st);
});

結果として、ブラウザのスクロールに応じてスクロール位置が表示されます。

スクロール位置を設定します

サンプル(scrollTop/03.html)を開いてbody内の構成がscrollTop/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、buttonをクリックするとdiv要素のスクロール位置が0(つまり最上部)に移動するようにしました。

$("button").click(function(){
	$("div").scrollTop(0);
});

結果として、div要素を適当にスクロールした後でbuttonをクリックするとスクロールが最上部に戻ります。

ブラウザのスクロール位置を設定します

サンプル(scrollTop/04.html)を開いてbody内にdiv要素が10個あるのを確認してください。jQueryは以下の様に記述され、div要素をクリックするとoffsetメソッドによってクリックされたdiv要素(this)の位置を取得します。取得した位置をscrollTopメソッドに利用することで、ブラウザのスクロール位置を移動します(セレクタにはwindowを利用します)。

$("div").click(function(){
	var targetY = $(this).offset().top;
	$(window).scrollTop(targetY);
});

結果として、クリックしたdiv要素がブラウザの上端に位置するような場所に移動します。

アニメでスクロール

scrollTop/04.htmlでは、どのように移動したのか分かりにくいのでanimateメソッドを利用してアニメで移動するサンプルを作成しました。サンプル(scrollTop/05.html)を開いてbody内の構成がscrollTop/04.htmlと同じ事を確認してください。

jQueryは以下の様に変更され、アニメでscrollTopの位置をtargetYに移動させます。

$("div").click(function(){
	var targetY = $(this).offset().top;
	$("html,body").animate({scrollTop:targetY});
});

結果として、クリックしたdiv要素がブラウザの上端に位置するような場所にアニメで移動します。このサンプルのanimateメソッドではセレクタにwindowを利用していません。この理由については以下の「メモ」を確認してください。

関連項目

左からのスクロール位置を取得/設定したい場合はscrollLeftメソッドを利用します。

メモ

bodyを利用するのか?htmlを利用するのか?(animeteメソッドの場合)

サンプルscrollTop/05.htmlでanimateメソッドのセレクタにhtmlとbodyの2つを設定しています。以前はbodyだけでしたが、その場合IE7で機能しませんでした。以前、検証したことがあるのですが、そのときはIE8までしか検証していなかったため気が付きませんでした。
→参考:jQuery:スムースなスクロール(後編)

windowやdocumentは?(animeteメソッドの場合)

scrollTopメソッドはページ全体のスクロール位置を取得する場合、セレクタにwindowを利用するのですが、animateメソッドでは機能しません。サンプル(scrollTop/test01.html)やサンプル(scrollTop/test01b.html)は、ほとんどscrollTop/05.htmlと同じですが、セレクタをwindowやdocumentに変更しました。

$("div").click(function(){
	var targetY = $(this).offset().top;
	$(window).animate({scrollTop:targetY});
});
$("div").click(function(){
	var targetY = $(this).offset().top;
	$(document).animate({scrollTop:targetY});
});

両方のサンプルともdiv要素をクリックしても機能しないことを確認してください。animateメソッドではセレクタにwindowやdocumentを利用できないようです。