jQueryでスクロール位置を取得・設定する:scrollTop()

今回は jQuery でスクロール位置を取得・設定する方法について説明します。

スクロール位置を使うことで、ページ内の特定位置に移動したり、スクロール位置によって表示を変更したりできます。

スクロール位置を取得する

スクロール位置を取得するためには scrollTop() メソッドを使います。

scrollTop () メソッドは戻り値として、水平方向のスクロール位置を返します。このとき、最上部が 0 となります。

scrollTop() メソッドの記述方法は以下の通りです。

例えば、 div 要素のスクロール位置を取得する場合は、以下のように記述します。
ブラウザ全体のスクロール位置を取得す場合は、 $(window) を指定します。

サンプル

以下はスクロール時に、現在のスクロール位置を表示する例です。

以下のスクロール領域 をスクロールすると、現在のスクロール位置が表示されます。
 

スクロール位置:0px

スクロール可能領域

 

スクロール位置を設定し移動する

scrollTop() の引数にスクロール値を指定することによって、スクロール位置を設定することができます。

最上部に移動する場合は引数に 0 指定します。

サンプル

以下はページの水平方向の 300 px の位置に移動する例です。

以下のボタンを押すと指定したスクロール位置に移動します。

ボタンを押すとページの 300px の位置に移動します。

スクロール時にアニメーションさせたい場合は「jQueryでページ内スクロールの速度・位置をカスタマイズする」の記事を参考にしてください。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて