HOME > - JavaScript >
- 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で時間を記述しておけば、下から浮き上がるように表示させたり、横からスライドインさせることができます。
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が使いこなせれば自分の思い通りの動きを付けることも可能です。
