jQueryでスクロール量を取得する方法！

スクロール量を取得する方法を説明していきます。
スクロール量を取得することで、特定の位置で要素を表示・非表示させたり、特定の位置に移動させたりすることが可能になります。業務でも使用頻度の高い記述ですので、覚えておくと重宝します！

上記をデモサイトを使って説明していきます。

スクロール位置を取得するメソッド。

jQueryには、スクロール位置（量）を取得するためのメソッドが用意されています。

それが、「scrollTop()」メソッドです。

scrollTop()メソッドは、戻り値に水平方向のスクロール位置を返します。

画面の左右どちらかにあるスクロールバーがページTOP（最上部）にあるときは、「０」になります。

スクロール位置（量）を取得することで、要素を表示・非表示にしたりと、Webサイトに動作をつけることができるようになります。

jQuery(オブジェクト).scrollTop();

jQuery(オブジェクト)については、対象とする要素を指定します。

基本的に指定する要素は、HTML要素となります。

//クラス名を指定する場合
jQuery(‘.クラス名’).scrollTop();

//HTMLタグ(divを対象とする場合)
jQuery(‘div’).scrollTop();

//IDを指定する場合
jQuery(‘#ID名’).scrollTop();

以上のように、対象としたい要素をしていします。

ブラウザ全体のスクロールを取得したい場合は、対象を$(window)とします。

正直、ブラウザ全体のスクロール位置を取得するのが1番使います。

jQuery(window).scrollTop();

これで、ブラウザ全体が対象となり、スクロール位置（量）を取得することができます。

それでは、前述したjQuery(window).scrollTop();を使って現在のスクロール位置を取得してみましょう。

この取得した値を利用することで、ユーザーが特定の位置までスクロールしたときに要素を表示・非表示させたりすることができます。

scrollTop();は、前述したようにスクロール位置を取得して利用することの方が多いですが、引数に値を指定することで特定の位置まで移動させることができるようになります。

jQuery(オブジェクト),scrollTop(スクロール位置);

scrollTop()に似たメソッドで、offset().topというのがあります。
offset().topは、配置されているHTML要素の座標を取得するのに使われるメソッドで、scrollTop();とは違い固定値を取得するために使用します。

offset().topとすることで、対象の要素のY座標を取得します。

//指定した要素のY座標を取得します。
jQuery(‘オブジェクト’).offset().top

topの部分をleftにすると、X座標を取得します。

//指定した要素のX座標を取得します。
jQuery(‘オブジェクト’).offset().left

Bottomやrightは存在しませんので、ご注意ください。

以上、scrollTop();の使い方でした。