i-f – Web Works –

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

JavaScript

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

  1. jQueryを使ってページのトップに戻るボタンを作成する方法
  2. scrollTopメソッドの使い方
  3. ボタンの表示・非表示をトリガーする方法
  4. カスタマイズ可能なスクロールアニメーションの作成方法
    目次

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

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

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

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

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

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

    scrollTop()メソッドの書き方。

    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との違い。

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

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

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

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

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

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

    デモサイト

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