jQueryのscrollTop()を使えばスクロール量を取得できます。
ページのトップへ戻るボタンなど、スクロール系のイベントでよく使いますね。
scrollTop()で、所定の位置にスクロールさせることもできます。
目次
scrollTop() の基本
scrollTop()の使い方を見る前にscrollTop()がどこのスクロール量を測っているか見てみましょう。
scrollTop() の測定位置
ドキュメントのトップからのスクロール量を測定します。
scrollTop() で取得
次にスクロール量を取得してみましょう。
ブラウザにスクロール量を表示させる
scrollイベントを使って、ブラウザに現在のスクロール量を表示してみましょう。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // スクロールしたら発動 $(window).scroll(function() { // スクロール量を変数に格納 var sc = $(this).scrollTop(); // HTMLにスクロール量を表示 $('p').text(sc); }); }); |
結果
サンプル
上記のようにドキュメントTOPからのスクロール量が取得できました。
スクロールのたびに、数値がカウンターのようにパラパラ動いているかと思います。
これはスクロールの度にイベントが走っているためで、こんなに頻繁にイベントが走ると処理が重くなりがちなので、留意した上で使用しましょう。
※クリックを連打しているようなものですね(笑)
scrollTop() で移動
次に特定のスクロール量へ移動してみましょう。
クリックすると特定の位置にスクロールさせる
clickイベントを使って、特定の位置にスクロールしてみましょう。
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // クリックしたら発動 $('p').click(function() { // スクロール量300の位置に移動 $('html, body').scrollTop(3000); }); }); |
結果
以下のテキストをクリックしてください。
ちょっと下に移動するはずです。
→ここをクリック
移動しましたか？
アニメーションではないので分かりにくいですが、移動しました。
基本構文
$(‘p’).scrollTop( 移動先のTOPからのスクロール量 )
ブラウザによる挙動の違い
ちなみに、上記サンプルではセレクタを$('html, body')と2つ指定しています。
これは以下のようにブラウザによって作動しないため、上記のように指定しています。
$('body')=> WebKit（chrome, safari）で正常に作動$('html')=> WebKit以外（IE, Firefox など）で正常に作動
例えば$('body')はFirefox では作動せず、$('html')はchromeでは作動しません。
そのため両方を指定することで、WebKitブラウザにも、それ以外のブラウザにも両方対応するようにしています。
