• HOME > 
  • Javascript > 
  • jQueryでスクロール量を取得する方法【scrollTop...

jQueryでスクロール量を取得する方法【scrollTopメソッド】

投稿日:

広告

スクロール量を取得してできること

ユーザーがページをどのくらいスクロールしたかというスクロール量を取得することができると、ユーザーのスクロールと連動させた機能を作ることが可能になります。

例えば下のような、特定の位置までページをスクロールしたら要素を表示させるといった機能を作ることができます。

プレビュー

jQueryをCDNで読み込ませておく

ここで紹介するスクロール量の取得方法はjQueryを使用しますので事前にサイトの<head></head>の中などに以下のCDNを記述して読み込ませておいてください。

CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

scrollTop()メソッドの使い方

jQueryでスクロール量を取得するには、scrollTop()メソッドを使用します。

ページのトップから何pxスクロールされているかを数値で取得できます。

scrollTopは、onメソッドとセットで使ってスクロールされると同時にスクロール量を取得するということがほとんどです。

縦のスクロール量を取得する

scrollTopメソッドの基本となるスクロール量の取得方法は、次のように記述して行います。

下の例をスクロールすると、現在のスクロール量が表示されます。

jQuery

$(function(){
    //スクロールされたら
    $(window).on("scroll",function(){
        //スクロール量を取得
        var scrollTop = $(window).scrollTop();
        //画面に表示
        $("#scrollVal span").text(scrollTop);
    });
});

プレビュー

今回はブラウザのスクロール量を取得するので「window」をセレクターにしていますが、overflowプロパティでスクロールするようにしている場合は要素のクラスやidをセレクターで指定します。

横のスクロール量を取得する

scrollTopと比べると使用頻度は少ないかもしれませんが、横スクロール量を取得するscrollLeftメソッドも用意されています。

使い方や記述の方法はscrollTopと同様です。

jQuery

$(function(){
    //スクロールされたら
    $(window).on("scroll",function(){
        //スクロール量を取得
        var scrollLeft = $(window).scrollLeft();
        //画面に表示
        $("#scrollVal span").text(scrollLeft);
    });//end scroll
});

プレビュー

トップからの任意の位置に移動させる

scrollTop()メソッドに数値を入れると画面の表示位置をトップからの任意の位置に移動させることができます。

下の例では、ボタンをクリックすると画面の表示位置がトップから100pxの位置に移動します。

jQuery

$(function(){
    var topBtn = $("#topBtn");
    //ボタンがクリックされたら
    topBtn.on("click",function(){
        //scrollTopを使う
        $(window).scrollTop(100);
    });//end click
});

プレビュー

animateメソッドを使ってトップに戻す

トップへ戻るボタンをクリックしたときに自動でスクロールしながらページトップへ戻るような機能を作りたい場合は、animateメソッドを使います。

jQuery

$(function(){
    var topBtn = $("#topBtn");
    //ボタンがクリックされたら
    topBtn.on("click",function(){
        $("body").animate({
            scrollTop:100,
        },1000);
    });//end click
});

プレビュー

スクロールフェードインの作り方

ここからは、特定の位置までページをスクロールしたら要素を表示させるというスクロールフェードインと呼ばれる機能の作り方について説明していきます。

元となるHTMLは次の通りです。スクロールと連動してフェードインさせたい要素には「scrollin」という任意のクラス名を付与しておきます。

HTML

<div class="sampleArea">
    <div id="test1" class="sample">スクロールしてください。</div>
    <div id="test2" class="sample scrollin">スクロールしてください。</div>
    <div id="test3" class="sample scrollin">スクロールしてください。</div>
    <div id="test4" class="sample scrollin">スクロールしてください。</div>
</div>

あらかじめフェードインさせたい要素は非表示にする

フェードインさせたい要素(scrollinクラス)はスクロールされるまでは見えないようにしたいので、あらかじめCSSのopacityプロパティもしくはvisibilityプロパティを使って非表示にしておきます。なお、displayを使って非表示にするとtransitionなどでエフェクトを付けられないので注意してください。

CSS

.scrollin{
    opacity:0;
    /*visibility:hiddenでも可*/
}

要素の位置を取得する

スクロールフェードインを実装するには、スクロール量の他に要素自身の位置も取得する必要があります。

要素の位置はoffset()メソッドを使って取得します。

ここでは各要素の位置をそれぞれ取得する必要があるため、繰り返し処理を行えるeachメソッドも利用しています。

jQuery

$(function(){
    $(".scrollin").each(function(){
        //TOPからの位置を取得
        var offsetTop = $(this).offset().top;
        //取得した数値を画面に表示
        $(this).children("span").text(offsetTop);
    });//end each
});

プレビュー

スクロールが要素の位置に達したら表示する

要素の表示切替はjQueryのaddClassメソッドを使ってクラスを付与することで行います。

ここではスクロールされたら「active」というクラスを付与するので、あらかじめCSS側で「active」というセレクターに要素を表示するスタイルを記述しておきます。

CSS

.scrollin.active{
    opacity:1;
    /*もしくはvisibility:visible*/
}

タイミングを調整する

スクロールされてウィンドウ内に要素が入ったらすぐに表示されるようにしたい場合は数値を調整します。

transformプロパティなどでカスタマイズ

非表示にしている段階でtransformプロパティを使って要素を移動させておきます。

スクロールで付与するクラスには元の位置に戻るようにtransformを指定し、transitionで時間を記述しておけば、下から浮き上がるように表示させたり、横からスライドインさせることができます。

リンク先のサムネイル
CSSのtransitionの使い方

CSSのtransitionは、要素が指定したスタイルの状態へとどのくらいの時間をかけて変化するかを指定することができるプロパティです。transitionプロパティを使うことで手軽にアニメーションが表現可能です...【もっと読む】

作成したコードは以下のようになります。

CSS

.sampleArea{
    overflow: hidden;/*はみ出した部分を非表示にする*/
}
.scrollin{/*フェードインさせたいもの*/
    opacity: 0;/*非表示*/
    transform: translateX(-100%);/*左へ移動*/
}
.scrollin.active{/*スクロールされた時*/
    opacity:1;/*表示*/
    transform: translateX(0);/*元の位置へ移動*/
    transition:.5s ease-in-out;/*スタイルが反映し終えるまでの所要時間*/
}

jQuery

$(function(){
    //スクロールされたら
    $(window).on("scroll",function(){
        //スクロール量を取得
        var sTop = $(window).scrollTop();
        $(".scrollin").each(function(){
            //要素の位置を取得
            var oTop = $(this).offset().top;
            //スクロール量が要素の位置を超えたら
            if(sTop > oTop - 300){//タイミングを調整
                //クラスを付与する
                $(this).addClass("active");
            }//end if
        });//end each
    });//end scroll
});//end function

プレビュー

以上でスクロールフェードインは完成です。要素を加えた場合でも「scrollin」というクラスを付与すればスクロールフェードインを実装できます。

まとめ

スクロールと連動したエフェクトを導入できればユーザーにサイトを印象付けることができます。今回はtransformを利用しましたが、animate.cssを使えばバリエーション豊富なアニメーションエフェクトを使うことができますし、animationプロパティとkeyframesが使いこなせれば自分の思い通りの動きを付けることも可能です。

広告

関連する記事

サムネイル

横スクロール可能なことを示すヒントを表示するJavascri……

2023年09月01日
Javascriptのライブラリ「ScrollHint(スクロールヒント)」を使えば、ユーザーに対して要素がスクロール可能であることをわかりやすく示すアイコンを表示することができます。
サムネイル

JavascriptでブラウザやOSを判定する方法【plat……

2023年09月01日
Javascriptのplatform.jsというライブラリを利用すれば、簡単にユーザーが使用しているブラウザやOS情報を取得し判別する処理を作ることが可能です。
サムネイル

Javascriptでフォーム送信時に確認ダイアログを出す方……

2023年09月01日
Javascriptでフォーム送信時にダイアログ表示させてユーザーに処理を続行して良いか確認するには「confirmメソッド」と「onsubmit属性」の2つを使用します。
サムネイル

Javascriptで文字のUnicode(UTF-16)を……

2023年09月01日
最終更新日:2023年08月29日
JavascriptのcharCodeAtを使うと、日本語(テキスト)のUnicode(UTF-16)を取得したり、Unicode(UTF-16)をテキストに変換することが可能です。
サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。
サムネイル

jQueryのinArray()で配列内を検索する方法【要素……

2023年05月01日
最終更新日:2023年05月31日
jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。
サムネイル

JavascriptのindexOfで文字列を検索する方法【……

2023年05月01日
最終更新日:2023年05月31日
indexOfメソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。