[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT

Post on:2013年6月11日

スクロールしてもナビゲーションが最上部に配置され、各セクションにアニメーションのスクロールで移動するナビゲーションを実装するjQueryのプラグインを紹介します。

最近の1ページで構成されたウェブサイトでよく見かけますね。

サイトのキャプチャ

SMINT

SMINTのデモ

デモは別に用意されていますが、SMINTのページ自体にも適用されています。
デモは、下記よりどうぞ。

サイトのキャプチャ

デモページ

1ページに複数のセクションを配置しており、ナビゲーションの各アイテムをクリックすると、アニメーションのスクロールで移動します。

サイトのキャプチャ

もちろん、普通にスクロールしてもナビゲーションが追従します。

SMINTのページ自体も同様の仕様です。

サイトのキャプチャ

SMINT

SMINTの使い方

Step 1: 外部ファイル

スクリプトを外部ファイルとして記述します。

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jquery.smint.js"></script>
</head>

Step 2: HTML

まずは、最上部に配置されるナビゲーションから。

<div class="subMenu" >
	<div class="inner">
	 	<a href="#" id="sTop" class="subNavBtn">Home</a> 
	 	<a href="#" id="s1" class="subNavBtn">Section 1</a>
	 	<a href="#" id="s2" class="subNavBtn">Section 2</a>
	 	<a href="#" id="s3" class="subNavBtn">Section 3</a>
	 	<a href="#" id="s4" class="subNavBtn">Section 4</a>
	 	<a href="#" id="s5" class="subNavBtn end">Section 5</a>
	</div>
</div>

ナビゲーションはスクリプトで指定できるようにclassなどを割り当てておきます。
※ここでは、class=subMenu

続いて、コンテンツ。
各セクションのclassとナビゲーションのidが対応しています。

<div class="section s1">
	<h1>Section 1</h1>
</div>

<div class="section s2">
	<h1>Section 2</h1>
</div>

コンテンツはidで、ナビはハッシュの方が使い勝手がよさそうですが。

Step 3: JavaScript

固定配置するナビゲーションをjQueryのセレクタで指定し、スクリプトを実行します。
オプションでは、スクロールのスピードを調整できます。

<script type="text/javascript">
$(document).ready( function() {
    $('.subMenu').smint({
    	'scrollSpeed' : 1000
    });
});
</script>

sponsors

top of page

©2024 coliss