今回は、jQueryのscrollTop():というメソッドを使用して、指定した要素のスクロール位置を取得する方法を紹介します。
スクロール位置を利用すると、「一定の場所までスクロールした時に〇〇をする」アクションをさせたりすることができるようになります。
- scrollTopの使い方
- 要素のスクロール位置の取得のしかた
- 要素にスクロール位置を指定する方法
- 現在のスクロール位置を取得する方法
- scrollTopの活用のしかた
scrollTop()とは
scrollTop()とは、jQueryのメソッドの中の一つで、ブラウザをスクロールした時に、どのくらいスクロールしたか（＝スクロール量）を取得することができます。
ブラウザの最上部が0になっています。
値を取得することだけでなく、特定の値を指定して、そこまで移動させる、といった動きにも使用できます。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
scrollTop()の使い方
要素のスクロール位置の取得
scrollTop()を使用して、要素のスクロール位置を取得する際の基本的な構文です。
対象の要素.scrollTop();
「対象とする要素」の書き方は、他のjQueryと同様、HTMLファイルのタグ名や、クラス/ id名を指定します。
// h1のスクロール位置を取得する
$('h1').scrollTop();
//.page-titleというクラス名がついた要素のスクロール位置を取得する
$('.page-title').scrollTop();
ブラウザ全体を対象にしたいときは以下のように記述します。
$(window).scrollTop();スクロール位置の指定
また、scrollTop();内に数値を入れることで、スクロール位置を指定することも可能です。
以下のように、引数としてカッコ内に値を渡します。
対象の要素.scrollTop(100);どこか指定の場所に移動させたい時に使用できます。
// h1のスクロール位置を取得する
$('h1').scrollTop();
//.page-titleというクラス名がついた要素のスクロール位置を取得する
$('.page-title').scrollTop();現在のスクロール位置の取得
現在ページ全体の中で、どこのスクロール位置にいるのか、ということを知りたい場合は以下の良に記述することで、現在のスクロール位置を取得することができます。
$(window).on('scroll', function() {
$(this).scrollTop();
});実装例
一定量スクロールした時に、表示させるという実装例です。 if文の条件の中では、スクロール量を取得して、100という数値を比較し、100以上になったときに要素を表示させるという指示をしています。
See the Pen ScrollTop_demo by ZeroPlus (@zeroplus-programming) on CodePen.
まとめ
今回はscrollTop();を利用して、ページ上部からのスクロール位置を取得する方法を紹介しました。
スクロール位置の取得・指定をうまく使えるようになると、トップに戻るボタンや、スクロール量に応じてヘッダーの固定・要素の表示をするなど多様な表現ができるようになります。 ページ内のユーザーの動きなども想定して、要所に活用できるようにしていきましょう！
