jQuery

jQuery スクロール値の取得方法

jQuery のスクロール値の取得方法を紹介します。
例えば、値をちゃんと取得しているか確認するために、スクロール値をページに表示したいときなどに便利な方法です。

  1. スクロール値の取得方法
    1. コードの解説

スクロール値の取得方法

スクロール値の取得方法紹介します。
全部入りのコードはこちら。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).scroll(function() {
$('#scrollvalue').text($(this).scrollTop());
});
</script>
</head>
<body>
<div style="position: fixed; top: 0; right: 0; z-index: 9999;">スクロール値<span id="scrollvalue">0</span>px</div>
<div style="height: 2000px"></div>
</body>
</html>

jQuery 単体のコードはこちら。jquery ファイルは別途任意で読み込んでください。

$(window).scroll(function() {
$('#scrollvalue').text($(this).scrollTop());
});

スクロール値を可視化するために値を付与するHTMLはこちら。

<div style="position: fixed; top: 0; right: 0; z-index: 9999;">スクロール値<span id="scrollvalue">0</span>px</div>

コードの解説

jQuery のコードの解説をします。

$(window).scroll(function() {
$('#scrollvalue').text($(this).scrollTop());
});

まずは $(window).scroll(function() でスクロールが実行されたら処理が始まるようにします。
続いて、自身で指定した ID や クラス(例ではID #scrollvalue を指定)に対して、ページのトップからのスクロール量(scrollTop)をテキスト(text)として挿入します。

まとめ

jQuery のスクロール値の取得方法を紹介しました。