.scrollTop()

現在のスクロールの縦位置を取得、またはマッチした要素のスクロールを指定した値の縦位置に移動します。

.scrollTop( ) 1.2.6追加

戻り値:Integer

マッチした最初の要素のスクロールの垂直位置を取得します。

この数値はスクロール領域に隠れた長さと同じになります。 また、スクロールが一番上にあるかスクロール領域がない場合、値は0になります。

.scrollTop( ) 1.2.6追加

戻り値:jQuery

マッチした各要素のスクロールの垂直位置を指定します。

引数 説明
value スクロールの新しい垂直位置を指定します。

この数値はスクロール領域に隠れるようになる長さと同じです。

補足事項

DIV領域をスクロールさせてボタンを押すと、DIV領域の垂直のスクロール位置を取得します。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div { margin:10px;padding:5px;border:2px solid #666;
  6. height:50px; width:50px; overflow:scroll;}
  7. </style>
  8. <script src="http://code.jquery.com/jquery-latest.js"></script>
  9. </head>
  10. <body>
  11. <input value="スクロール位置取得" type="button" id="get_scroll" />
  12. <span></span>
  13. <div>
  14. この領域をスクロールさせてから、取得ボタンを押してください。
  15. この領域のスクロールの垂直位置を出力します。
  16. </div>
  17. <script>
  18. var div = $("div");
  19. $('#get_scroll').click(function(){
  20. $("span").text( "scrollTop:" + div.scrollTop() );
  21. });
  22. </script>
  23. </body>
  24. </html>

設定ボタンを押すと、スクロールを垂直100pxの位置に移動させます。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div { margin:10px;padding:5px;border:2px solid #666;
  6. height:50px; width:50px; overflow:scroll;}
  7. </style>
  8. <script src="http://code.jquery.com/jquery-latest.js"></script>
  9. </head>
  10. <body>
  11. <input value="スクロール100pxの位置へ設定" type="button" id="set_scroll" />
  12. <span></span>
  13. <div>
  14. 設定ボタンを押してください。
  15. ボタンが押されるとこの領域のスクロールを垂直100pxの位置へ移動します。
  16. </div>
  17. <script>
  18. var div = $("div");
  19. $('#set_scroll').click(function(){
  20. div.scrollTop(100);
  21. });
  22. </script>
  23. </body>
  24. </html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM