jquery.page-scroller.jsでのページ内アンカーのスムーズスクロール実装ガイド

近年のウェブデザインのトレンドの1つに、シングルページレイアウトがあります。このスタイルのサイトは、複数のセクションが1つのページに表示され、ユーザーはページ内のアンカーをクリックして異なるセクション間を移動することができます。
この記事では、jquery.page-scroller.jsを使って、そのようなページ内アンカーをスムーズにスクロール移動する方法を詳しく説明します。

必要なJavaScriptの導入

まず、jquery.page-scroller-308.jsを使用するために、次の2つの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記述

通常のページ内アンカーと同じ方法でHTMLを記述します。以下は、ページのトップにアンカーを配置し、その1500px下にページトップへのリンクを配置するサンプルです。

<a id="top"></a>
<div id="idWrap">
	<h1>ページ内アンカーをスムーズにスクロール<br>（1500px下にアンカーリンクがあります）</h1>
</div><!--/高さを1500pxに指定-->
<a href="#top">↑ページトップへ</a>

ページ内アンカーをスムーズにスクロールするデモページ

具体的な動作を確認するために、以下のデモページをご参照ください。

ページ内アンカーをスムーズにスクロールするデモ

ソース元の情報

このスムーズスクロールの機能は、以下のサイトから取得したスクリプトを使用しています。より詳しい情報や、他の利用方法、カスタマイズの方法などはソース元のサイトをご参照ください。

[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3

まとめ

ページ内アンカーのスムーズスクロールは、ユーザー体験を向上させるための素晴らしい方法です。jquery.page-scroller.jsを使って簡単にこの機能を実装できるので、是非ともあなたのウェブサイトに導入してみてください。

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