.scrollTop()
現在のスクロールの縦位置を取得、またはマッチした要素のスクロールを指定した値の縦位置に移動します。
- .scrollTop( ) 1.2.6追加
- .scrollTop( ) 1.2.6追加
- 補足事項
- デモ
.scrollTop( ) 1.2.6追加
戻り値:Integer
マッチした最初の要素のスクロールの垂直位置を取得します。
この数値はスクロール領域に隠れた長さと同じになります。 また、スクロールが一番上にあるかスクロール領域がない場合、値は0になります。
.scrollTop( ) 1.2.6追加
戻り値:jQuery
マッチした各要素のスクロールの垂直位置を指定します。
引数 | 説明 |
---|---|
value | スクロールの新しい垂直位置を指定します。 |
この数値はスクロール領域に隠れるようになる長さと同じです。
補足事項
DIV領域をスクロールさせてボタンを押すと、DIV領域の垂直のスクロール位置を取得します。
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:10px;padding:5px;border:2px solid #666;
height:50px; width:50px; overflow:scroll;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input value="スクロール位置取得" type="button" id="get_scroll" />
<span></span>
<div>
この領域をスクロールさせてから、取得ボタンを押してください。
この領域のスクロールの垂直位置を出力します。
</div>
<script>
var div = $("div");
$('#get_scroll').click(function(){
$("span").text( "scrollTop:" + div.scrollTop() );
});
</script>
</body>
</html>
設定ボタンを押すと、スクロールを垂直100pxの位置に移動させます。
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:10px;padding:5px;border:2px solid #666;
height:50px; width:50px; overflow:scroll;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input value="スクロール100pxの位置へ設定" type="button" id="set_scroll" />
<span></span>
<div>
設定ボタンを押してください。
ボタンが押されるとこの領域のスクロールを垂直100pxの位置へ移動します。
</div>
<script>
var div = $("div");
$('#set_scroll').click(function(){
div.scrollTop(100);
});
</script>
</body>
</html>
© 2010 - 2017 STUDIO KINGDOM