jQuery:スクロール値の取得・表示する方法

  • Posted on
  • Category : Tips
jQuery:スクロール値の取得・表示する方法

備忘録。jQueryを使用して現在のスクロール値を取得・表示させる方法です。パララックスサイトなどでスクロール値によって要素を動かしたり表示・非表示を切り替えたりすることがありますが、そういったものを実装する際にどの位置で処理を行うかの目安になり非常に便利です。

HTML

<head>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(window).scroll(function() {
				$('#sv').text('スクロール値:' + $(this).scrollTop());
			});
		});
	</script>
</head>

<body>
	<p id="sv" style="position: fixed; top: 20px; right: 20px;">スクロール値:0</p>
</body>

jQueryが必要なので予め読み込ませておき、あとはそれぞれ記述してブラウザで確認すると、ページ右上に現在のスクロール値が表示されるようになります。
他の場所に表示したいという場合はソース赤字部分のtop: 20px;right: 20px;の箇所を任意で変更してください。
上記ソースでは必要なくなったらすぐに削除できるようにスタイルなどをHTML内に全て記述していますが、外部ファイルに記述してもちろん問題ないです。

Back to Top

jQuery:スクロール値の取得・表示する方法

jQuery:スクロール値の取得・表示する方法

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。