分類

Qumeru

scrollTop() | jQueryリファレンス

jQueryのscrollTop()とは?

jQueryのscrollTop()は要素やウィンドウの現在のスクロール位置を取得したり、更に強制的に指定のスクロール位置までスクロールさせるといった処理も可能な2つの機能を有するメソッドです。

scrollTop()

セレクタで指定した要素の現在のスクロール位置(垂直方向)のピクセルの値を取得します。

// div要素のスクロール位置
$('div').scrollTop()

// ウィンドウのスクロール位置
$(window).scrollTop()

戻り値

Integer
スクロール位置が整数で返されます。

scrollTop( value )

引数で指定した位置にスクロール(垂直方向)を行うメソッドです。

引数

value
設定するスクロール位置

// div要素内(overflow: scrollの場合など)
$('div').scrollTop(100)

// ウィンドウ全体
$(window).scrollTop(100)

戻り値

jQueryオブジェクト

jQueryのscrollTop()の使い方

scrollTop()

上記のサンプルコードではスクロール時のイベントハンドラの中で.scrollTop()によって、現在の垂直方向のスクロール幅を取得し、表示させています。

またスクロール幅が500pxを超えた場合にアラートを表示する仕組みを入れています。

scrollTop(value)

上記のサンプルコードではボタンをクリックした際に、.scrollTop(value)により200pxや800pxなど指定のスクロール幅になるように垂直方向にスクロールさせています。