（jQueryの学習）CSS：スクロール位置を操作する／scrollTopメソッド／縦スクロール位置を取得する（その２）

引き続き、縦スクロール位置を取得する方法を学びます。

次はブラウザに対する縦スクロール位置を取得します。

1-2.scrollTopメソッド【返却値(数値) = 要素.scrollTop( )】でブラウザの縦スクロール位置（Y座標）を取得する

1-1.では要素に対する縦スクロール位置（Y座標）を取得しましたが、
1-2.ではブラウザ（window）の縦スクロール位置（Y座標）を取得します。

サンプルソース

// HTML
<div class="box-inline">
  <b>テストエリア３</b>
  <div class="box-css-test-area-3">・・・略・・・</div>
  <div>scrollTop: <span id="st">0</span></div>
</div>

// CSS
/* テストエリア３ */
.box-css-test-area-3 {overflow:scroll; background: #F5EEFF; border:5px solid #44f; margin: 5px; padding: 5px; max-height:100px; max-width:200px; float:right;}

// jQuery
$(function() {
  // サンプル：「ブラウザ」の縦スクロール位置（Y座標）を取得する
  $(window).scroll(function(){  // スクロールイベントを捕捉
    // 【構文】返却値(数値) = 要素.scrollTop()
    var st = $(window).scrollTop();
    // スクロール位置をセット
    $("span #st").text(st);
  });
});

実装例

要素の縦スクロール位置（Y座標）を取得します。

テストエリア３

【List】
1.ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
2.xxxxx
3.xxxxx
4.xxxxx
5.xxxxx
6.xxxxx
7.xxxxx
8.xxxxx

scrollTop: 0

いかがでしたか？
次回は「2.要素の縦スクロール位置（Y座標）を設定する」を学びます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share