JavaScript

jQueryでスクロール位置を正確に取得・表示する方法 – scroll()とscrollTop()の使い方

jQueryのスクロール位置情報の取得は、様々なウェブアプリケーションやウェブサイトのインタラクティブ性を高めるための重要な要素となっています。
この記事では、スクロール位置情報を取得・表示する方法と、その際に注意すべきポイントを詳しく説明します。

スクロール位置情報の取得と表示の基本

jQueryのscroll()とscrollTop()は、ブラウザのスクロール動作と、そのスクロール位置を取得するためのメソッドです。
以下の手順で、スクロール位置の情報を取得し、その値を表示させることができます。

  • 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でのスクロール位置情報の表示設定

スクロール位置情報を表示するためのエリアを、CSSを使ってデザインします。
特に、position:fixedを使用することで、情報のエリアを常に画面上部に固定表示することができます。
スクロール位置を表示させるためのエリア(#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コードの組み立て

次に、HTMLを使って、スクロール位置情報を表示するエリアと、実際のスクロールを体験できる領域を設定します。

<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の指定よりも、透明な画像などを使用して間隔を取る方法が推奨されます。

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

実際の動作を確認したい方は、以下のデモページをご覧ください。
スクロール位置情報を取得表示するデモ

最後に

この記事を通して、jQueryを使用したスクロール位置情報の取得・表示方法についての基本的な知識を得ることができました。このテクニックを活用することで、ユーザー体験を向上させるインタラクティブなウェブページを作成することができます。

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