jQueryのscroll()とscrollTop()を使ってスクロール位置情報を取得表示させる方法をご紹介します。
Contents
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アナリティクスタグは流用しないで下さい。
ディスプレイ広告