jQueryでスクロール位置を取得・設定する：scrollTop()

今回は jQuery でスクロール位置を取得・設定する方法について説明します。

スクロール位置を使うことで、ページ内の特定位置に移動したり、スクロール位置によって表示を変更したりできます。

1 スクロール位置を取得する
2 スクロール位置を設定し移動する

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

スクロール位置を取得するためには scrollTop() メソッドを使います。

scrollTop () メソッドは戻り値として、水平方向のスクロール位置を返します。このとき、最上部が 0 となります。

scrollTop() メソッドの記述方法は以下の通りです。

jQueryオブジェクト.scrollTop();

例えば、 div 要素のスクロール位置を取得する場合は、以下のように記述します。

$('div').scrollTop()

ブラウザ全体のスクロール位置を取得す場合は、 $(window) を指定します。

$(window).scrollTop()

サンプル

以下はスクロール時に、現在のスクロール位置を表示する例です。

<!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() の引数にスクロール値を指定することによって、スクロール位置を設定することができます。

jQueryオブジェクト.scrollTop(スクロール位置)

最上部に移動する場合は引数に 0 指定します。

サンプル

以下はページの水平方向の 300 px の位置に移動する例です。

<!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でページ内スクロールの速度・位置をカスタマイズする」の記事を参考にしてください。