jquery.page-scroller.jsを使って簡単に設置できる、ページ内アンカーをスムーズにスクロール移動する方法をご紹介します。
Contents
jquery.page-scroller-308.jsを使ったページ内アンカーをスムーズにスクロールするJavaScriptの記述
※jquery-1.6.min.js、jquery.page-scroller-308.jsファイルを読み込みます。
<script type="text/javascript" src="js/jquery-1.6.min.js"></script> <script type="text/javascript" src="js/jquery.page-scroller-308.js"></script>
※adjSpeedにはスクロール移動のスピードを設定します。以下は0.5秒で移動する設定です。
<script type="text/javascript"> adjSpeed = .5; </script>
ページ内アンカーをスムーズにスクロールするCSSの記述
※必要に応じて変更して下さい。
<style type="text/css"> <!-- h1{ font-size:14px; font-weight:normal; line-height:1.2em; } #idWrap{ width:1000px; height:1500px; } a{ font-size:14px; text-decoration:none; } --> </style>
ページ内アンカーをスムーズにスクロールするHTMLの記述
※通常のページ内アンカーの記述と同じです。必要に応じて変更して下さい。
<a id="top"></a> <div id="idWrap"> <h1>ページ内アンカーをスムーズにスクロール<br>(1500px下にアンカーリンクがあります)</h1> </div><!--/高さを1500pxに指定--> <a href="#top">↑ページトップへ</a>
ページ内アンカーをスムーズにスクロールするデモページ
ソース元:[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3
上記「ソース元」のJsを使用させて頂いておりますが、デモページ以外の利用方法も色々と調整や設定が出来る様です。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告