jQueryのscrollTop()でスクロール量を取得

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryのscrollTop()を使えばスクロール量を取得できます。

ページのトップへ戻るボタンなど、スクロール系のイベントでよく使いますね。

scrollTop()で、所定の位置にスクロールさせることもできます。

 

scrollTop() の基本

scrollTop()の使い方を見る前にscrollTop()がどこのスクロール量を測っているか見てみましょう。

scrollTop() の測定位置

ドキュメントのトップからのスクロール量を測定します。

TOPからのスクロール量を取得

scrollTop() で取得

次にスクロール量を取得してみましょう。

ブラウザにスクロール量を表示させる

scrollイベントを使って、ブラウザに現在のスクロール量を表示してみましょう。

jQuery

 結果

サンプル

上記のようにドキュメントTOPからのスクロール量が取得できました。

スクロールのたびに、数値がカウンターのようにパラパラ動いているかと思います。

これはスクロールの度にイベントが走っているためで、こんなに頻繁にイベントが走ると処理が重くなりがちなので、留意した上で使用しましょう。

※クリックを連打しているようなものですね(笑)

scrollTop() で移動

次に特定のスクロール量へ移動してみましょう。

クリックすると特定の位置にスクロールさせる

clickイベントを使って、特定の位置にスクロールしてみましょう。

jQuery

結果

以下のテキストをクリックしてください。

ちょっと下に移動するはずです。

→ここをクリック

移動しましたか?

アニメーションではないので分かりにくいですが、移動しました。

基本構文

$(‘p’).scrollTop( 移動先のTOPからのスクロール量 )

ブラウザによる挙動の違い

ちなみに、上記サンプルではセレクタを$('html, body')と2つ指定しています。

これは以下のようにブラウザによって作動しないため、上記のように指定しています。

  • $('body') => WebKit(chrome, safari)で正常に作動
  • $('html') => WebKit以外(IE, Firefox など)で正常に作動

例えば$('body')はFirefox では作動せず、$('html')はchromeでは作動しません。

そのため両方を指定することで、WebKitブラウザにも、それ以外のブラウザにも両方対応するようにしています。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*