[JS]指定した要素を抽出して、自動でページ内アンカーのナビゲーションを設置するスクリプト -MagicNav.js

ページ内の指定した範囲から、指定した要素を抽出して、自動で目次のようなナビゲーションを作成するjQueryのプラグインを紹介します。

MagicNav.js
MagicNav.js -GitHub

• MagicNav.jsのデモ
• MagicNav.jsの使い方

MagicNav.jsのデモ

デモでは、dl要素のFAQコンテンツから、dt要素を抽出して、ナビゲーションを生成します。

デモページ

「Run MagicNav.js」ボタンをクリックすると、Q部分を抽出してナビゲーションを設置します。

ナビゲーションを抽出

ページ内の移動は、アニメーションを伴ってスクロールします。

MagicNav.jsの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="magicnav.js"></script>

Step 2: HTML

デモではdl要素でFAQが実装されています。
dl, ulなどに限らず、hxの見出しなどでも構いません。

<h3>FAQ</h3>
<dl>
	<div id="commercial" title="commercial"><dt><strong>よくある質問</strong></dt>
	<dd><p>回答</p></dd></div>
	<div id="restrict" title="restrict"><dt><strong>よくある質問</strong></dt>
	<dd><p>回答</p></dd></div>
	...
	...
</dl>

抽出したナビゲーションを配置するエリアを確保します。

<nav id="article-nav"></nav>

Step 3: JavaScript

抽出したナビゲーションを配置するセレクタ（#article-nav）、抽出するセレクタ（dt strong）を指定し、スクリプトを実行します。

<script>
$('.demo-btn').on('click',function(e){
	var magicNav = $.MagicNav($('#article-nav'),$('dt strong'));
});
</script>

スクリプトのオプション

オプションではナビゲーションのラベル、遷移する際のアニメーションや表示位置の調整が設定できます。

titles

ナビゲーション用のテキストを指定したdata属性から抽出します。

ease

スクロール時のアニメーションの種類

duration

アニメーションの持続時間

offset

目標エレメントのスクロール時のオフセット量

オプションを使用すると、下記のようになります。

<script>
$('.demo-btn').on('click',function(e){
	var magicNav = $.MagicNav($('#article-nav'),$('dt strong'),{
		titles: 'data-title',
		ease: function (x, t, b, c, d) {
			return -c *(t/=d)*(t-2) + b;
		},
		duration: 500,
		offset: -60
	});
});
</script>