ページ内リンク用のスムーズナビゲーションを作成できる「jQuery One Page Navigation Plugin」

Check このエントリーをはてなブックマークに追加

ページ内リンク用のナビゲーションを作成できる「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();
});

サンプル

スポンサードリンク

コメント

カテゴリー:jQuery スクロール ライブラリ