スクロール位置や要素の座標を取得する

スクロールや要素の位置を取得して何らかの処理を行うことがよくあるのですが、取得方法を忘れがちなのでメモしておきます。

サンプルコード

各値を取得して、HTMLに数値を表示してみます。

HTML

<div id="scroll">
	<div>スクロール位置</div>
	<div>scrollTop():<span id="scrollTop"></span></div>
	<div>scrollLeft():<span id="scrollLeft"></span></div>
</div>
<div id="offset">
	<div>要素の位置</div>
	<div>offset().top:<span id="offsetTop"></span></div>
	<div>offset().left:<span id="offsetLeft"></span></div>
</div>

JavaScript

$(function() {
	function getScroll() {
		$('#scrollTop').text($(window).scrollTop());
		$('#scrollLeft').text($(window).scrollLeft());
	}
	function getOffset() {
		$('#offsetTop').text($('#offset').offset().top);
		$('#offsetLeft').text($('#offset').offset().left);
	}
	$(window).on('load scroll', function() {
		getScroll();
		getOffset();
	});
});

スクロール位置の取得は$(window).scrollTop()や$(window).scrollLeft()で、
要素の座標は$(element).offset().topや$(element).offset().leftで取得できます。
基準になる座標はページの左上(body要素の左上)になります。

スクロール位置と要素の座標取得のデモページ
　

【参考サイト】

• scrollTop() – jQuery 日本語リファレンス
• scrollLeft() – jQuery 日本語リファレンス
• offset() – jQuery 日本語リファレンス