1ページサイト用のナビゲーション機能を補助する「jQuery One Page Navigation Plugin」

2013年4月5日jQueryプラグイン活用

1ページ完結のサイトを作る際、現在見ている要素と応じてナビゲーションにcurrentをつけたりすることが可能なプラグインです。
更にjquery.easing等のプラグインを利用することで要素の間をスムーズに移動させることも可能です。

JavaScript

(function($){
	$(function() {
		$('.nav').onePageNav();
	});
})(jQuery);

HTML

<nav class="nav">
	<span class="current"><a href="#section01">section01</a></span>
	<span><a href="#section02">section02</a></span>
	<span><a href="#section03">section03</a></span>
</nav>
	
<div id="contents">
	<section id="section01" class="section">
		<h2>section01</h2>
	</section>
	<section id="section02" class="section">
		<h2>section02</h2>
	</section>
	<section id="section03" class="section">
		<h2>section03</h2>
	</section>
</div>