jQuery のスクロール値の取得方法を紹介します。
例えば、値をちゃんと取得しているか確認するために、スクロール値をページに表示したいときなどに便利な方法です。
スクロール値の取得方法
スクロール値の取得方法紹介します。
全部入りのコードはこちら。
<!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 のスクロール値の取得方法を紹介しました。