JavaScript

scroll()とscrollTop()を使ってスクロール位置情報を取得表示させる方法【jQuery】

jQueryのscroll()とscrollTop()を使ってスクロール位置情報を取得表示させる方法をご紹介します。

scroll()とscrollTop()を使ってスクロール位置情報を取得表示させるJavaScriptの記述

※jquery.min.js(v1.4.4)ファイルを読み込みます。scroll()でスクロール移動時にscrollTop()でページ上部からのスクロール位置を取得します。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(window).scroll(function () { 
			$("#idAtai").val($(document).scrollTop());	//スクロール位置の値をidAtaiに設定
	});
</script>

スクロール位置情報を取得表示させるCSSの記述

※スクロール位置を表示させるためのエリア(#idKotei)を固定(position:fixed)にします。必要に応じて変更して下さい。

<style type="text/css">  
<!--
h1{
	font-size:14px;
	font-weight:normal;
	text-align:center;
}
#idWrap{
	width:700px;
	margin:0 auto;
}
#idKotei{
	width:700px;
	margin:0 auto;
	position:fixed;
	height:40px;
	text-align:center;
}
* html div#idKotei {
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop+0));
	margin:0 auto;
	width:700px;
}
-->  
</style>

スクロール位置情報を取得表示させるHTMLの記述

※id=”idAtai”にスクロール位置の値を出力します。必要に応じて変更して下さい。

<div id="idWrap">
<div id="idKotei">
	<h1>スクロール位置情報取得・表示(下にスクロールして見て下さい)</h1>
    <input id="idAtai" style="text-align:center; font-size:14px;" value="0" type="text" />
</div><!--/値表示input部分固定-->
</div>
<div style="height:10000px;">
</div><!--/高さを10000pxに指定-->

スクロール位置情報を取得表示させてみて思ったこと

  • CSSの指定によってはブラウザの種類やバージョンにより、取得した値に若干誤差があります。
  • アンカーでページ内を移動する際はCSSのpaddingやmargin指定でコンテンツ間の余白や空間は指定せずに、透明の画像(spacer.gif)等でサイズ高さのサイズを指定して空間を取った方が良いです。

スクロール位置情報を取得表示するデモページ

スクロール位置情報を取得表示するデモ

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。