近年のウェブデザインのトレンドの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アナリティクスタグは流用しないで下さい。
