jquery scrollTopメソッド

TOPページに戻る > jquery入門

scrollTop()メソッド

scrollTopメソッドは、上からスクロールした位置を取得するメソッドです
引数には何も指定しません

$("セレクタ").scrollTop()

ブラウザのページの上からの位置

$(document).scrollTop()

スクロールした場合に処理を実行する

指定した要素にロールオーバーしたときに、スクロールするとアニメーションします
チェーンメソッドで同時に、クリックした要素にテキストを表示します

jquery

$(function() {
	$(window).scroll(function(){
	$("#hoge").text("scrollTop" + $(this).scrollTop());
	});
});

css

#hoge {
 border: solid 1px;
 height: 200px;
}

html

<div id="hoge">scrollTopなし</div>

サンプル

スクロールの上位置を指定

引数に数字を指定するとpxでスクロールの上位置を指定できます

$("セレクタ").scrollTop(数字);

スクロールの上位置を指定

指定した要素のスクロールの上位置を指定します

jquery

$("#hoge2").scrollTop(50);

css

#hoge {
 border: solid 1px;
 height: 100px;
 overflow: scroll;
}

html

<div id="hoge2">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11</div>

サンプル
スクロールバーの開始位置に注目してください