.scrollTop()

現在のスクロールの縦位置を取得、またはマッチした要素のスクロールを指定した値の縦位置に移動します。

.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>

 Back to top

© 2010 - 2017 STUDIO KINGDOM