jquery.page-scroller.jsを使ってページ内アンカーをスムーズにスクロールする方法【簡単設置】

jquery.page-scroller.jsを使って簡単に設置できる、ページ内アンカーをスムーズにスクロール移動する方法をご紹介します。

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アナリティクスタグは流用しないで下さい。