Element.scrollTop - 要素内の垂直方向のスクロール量を取得、変更する

投稿日: / 更新日:

JavaScriptの、ElementオブジェクトのscrollTopは、要素内の垂直方向のスクロール量を取得、変更するプロパティです。

説明

scrollTopプロパティは、要素内における垂直方向のスクロール量を含みます。スクロールできない要素、またはiframeの場合、取得できる値は0です。iframe内のスクロール量を得るにはwindow.pageYを参照して下さい。

id="target"

内部コンテンツ

青い枠線内に大きなコンテンツを内包しているとします。画像が青枠内の上端部分にピッタリとくっつく位置までスクロールした時のスクロール量が、scrollTopです。

// 要素を取得
var divElement = document.getElementById( "target" ) ;

// scrollTopを変更
divElement.scrollTop = 50 ;

scrollTopプロパティの値は変更可能です。値を指定すると、その値の分だけ要素内でスクロールした状態になります。

サンプルコード

<div id="target">SYNCER</div>
// div要素を取得
var divElement = document.getElementById( "target" ) ;

// scrollTopを取得
var scrollTop = divElement.scrollTop ;
// div要素を取得
var divElement = document.getElementById( "target" ) ;

// scrollTopを取得
divElement.scrollTop = 50 ;

デモ

Element.scrollTopを取得して表示します。実行ボタンを押すと、scrollTopプロパティに50をセットします。

構文

long scrollTop = Element.scrollTop
Element.scrollTop = long newscrollTop

返り値

項目説明
scrollTop要素内の垂直方向のスクロール量。スクロールバーがない場合、iframeの場合は0。

指定する値

項目説明
newscrollTop新しく設定したい垂直方向のスクロール量。この値の分だけスクロールした状態になる。

関連項目