ページ内リンク用のスムーズナビゲーションを作成できる「jQuery One Page Navigation Plugin」
配布元:jQuery One Page Navigation Plugin
jQuery One Page Navigation Pluginはページ内リンクナビゲーションをスムーズスクロールに変換することが出来るJavaScriptライブラリです。jQuery ScrollTo plugin.を合わせて利用することで柔軟性の高いスクロールを実装しています。
利用方法
jQueryとQuery ScrollTo pluginそして、ダウンロードした「jquery.nav.min.js」の読み込みを行います。
<script src="jquery.js"></script>
<script src="jquery.scrollTo.js"></script>
<script src="jquery.nav.min.js"></script>
ナビゲーションはul/liのリストで作成します。現在の表示位置に「class=”current”」を追加しておきます。このclassはナビゲーションがクリックされた際に新しい表示位置のリンクが「class=”current”」に変更されます。
<ul id="nav">
<li class="current"><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li"><a href="#section-3">Section 3</a></li>
</ul>
メインのコンテンツはナビゲーションのhref属性に対応したid属性で作成します。
<div id="section-1">
<strong>Section 1</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-2">
<strong>Section 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-3">
<strong>Section 3</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
onePageNavメソッドを実行することでナビゲーションがスムーズナビゲーションに変換されます。
$(document).ready(function() {
$('#nav').onePageNav();
});
スポンサードリンク