scrollTop()：スクロールの上縦位置を取得する

2016/05/11

スクロールの上縦位置を取得する

スクロールの上縦位置を取得するの書式

要素.scrollTop();

スクロールの上縦位置を取得する場合は、要素.scrollTop()をします。

具体例(スクロールの上縦位置を取得するjQueryのサンプルコード)

１．対象となるテストエリアのスクロールイベントが発生した際の処理を設定

２．スクロールイベントの際にはscrollTopメソッドにて上縦位置を取得

３．取得した上縦位置をdivタグにて表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
<!--
-->
</style>
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
  var message;

  // スクロールイベント
  $(".testArea").scroll(function(){
    // scrollTopメソッドの結果を表示
    message = "scrollTopメソッドの結果は" + $(this).scrollTop();
    $("#divMessage").text(message);
  });
});
</script>
</head>
<body>
  <textarea name="testArea" class="testArea" cols=40 rows=4>
テスト１
テスト２
テスト３
テスト４
テスト５
テスト６
テスト７
テスト８
テスト９
テスト１０
  </textarea>
  <br>
  <br>
  <br>
  <div id = "divMessage"></div>
</body>
</html>