jQueryでスクロール位置を取得する方法を紹介！

jQueryではWEBページの画面上のスクロール位置を取得したり、プログラムでスクロールさせるといった処理が可能になります。

まず基礎知識からですが、jQueryのスクロールは水平方向・垂直方向の2種類のスクロールがあります。

2種類の方向のスクロールの量はそれぞれjQueryの

• 垂直方向：.scrollTop()
• 水平方向：.scrollLeft()

下記のサンプルコードを見てみましょう。プレビュー画面で縦スクロールすると、そのスクロール量（スクロール位置）を表示するようにしています。

今回windowオブジェクトに対してスクロールイベントで処理を行っていますが、$(this)のthisはwindowオブジェクトです。

jQueryの.scrollTop()を使い垂直方向のスクロール位置を取得することが出来ます。

次に水平方向のスクロール位置を取得してみましょう。.scrollLeft()で取得が可能です。

下記のサンプルコードを見てみましょう。プレビュー画面で横スクロールしてみましょう。

今回もjQueryのセレクタにwindowオブジェクトを指定して.scrollLeft()により水平方向のスクロール位置を取得し、その値を表示しています。

次にjQueryの.scrollTop()と.scrollLeft()を使ってプログラムで自動的にスクロールさせる方法を紹介します。

.scrollTop()と.scrollLeft()は引数無しで利用すると、スクロール位置の取得の機能となりますが、引数で数値を指定することで、その値のスクロール位置までそれぞれ垂直方向・水平方向にスクロールさせることが出来ます。

下記のサンプルコードを見てみましょう。プレビュー欄の200pxや800pxなどのボタンを押してみましょう。

今回ボタンをクリックすると

• $(window).scrollTop(200);
• $(window).scrollTop(800);

• $(window).scrollLeft(200);
• $(window).scrollLeft(800);