今回は jQuery でスクロール位置を取得・設定する方法について説明します。
スクロール位置を使うことで、ページ内の特定位置に移動したり、スクロール位置によって表示を変更したりできます。
スクロール位置を取得する
スクロール位置を取得するためには scrollTop() メソッドを使います。
scrollTop () メソッドは戻り値として、水平方向のスクロール位置を返します。このとき、最上部が 0 となります。
scrollTop() メソッドの記述方法は以下の通りです。
|
1 |
jQueryオブジェクト.scrollTop(); |
例えば、 div 要素のスクロール位置を取得する場合は、以下のように記述します。
|
1 |
$('div').scrollTop() |
ブラウザ全体のスクロール位置を取得す場合は、
$(window) を指定します。
|
1 |
$(window).scrollTop() |
サンプル
以下はスクロール時に、現在のスクロール位置を表示する例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <p>スクロール位置：<span id="scroll-amount">0px</span></p> <div id="scroll-box"> <div id="scroll-contents">スクロール領域</div> </div> </body> <style> #scroll-box { overflow: scroll; height: 100px; border: 1px solid black; } #scroll-contents { height: 700px; } </style> <script> $('#scroll-box').scroll(function() { $('#scroll-amount').text($(this).scrollTop() + 'px'); }); </script> </html> |
以下のスクロール領域 をスクロールすると、現在のスクロール位置が表示されます。
スクロール位置：0px
スクロール可能領域
スクロール位置を設定し移動する
scrollTop() の引数にスクロール値を指定することによって、スクロール位置を設定することができます。
|
1 |
jQueryオブジェクト.scrollTop(スクロール位置) |
最上部に移動する場合は引数に 0 指定します。
サンプル
以下はページの水平方向の 300 px の位置に移動する例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <p>ボタンを押すとページの 300px の位置に移動します。</p> <button id="button">移動する</button> </body> <script> $('#button').on('click', function(){ $(window).scrollTop(300); }); </script> </html> |
以下のボタンを押すと指定したスクロール位置に移動します。
ボタンを押すとページの 300px の位置に移動します。
スクロール時にアニメーションさせたい場合は「jQueryでページ内スクロールの速度・位置をカスタマイズする」の記事を参考にしてください。
