[JS]自動でページ内の見出し要素を抽出しアンカーを生成するスクリプト -AutoAnchors

指定した範囲内から特定のエレメント（h2要素など）を自動的に抽出し、ページ内アンカーの一覧を自動で生成するjQueryのプラグインを紹介します。

AutoAnchors
デモ

[ad#ad-2]

デモでは、div要素内にh3要素を三つ配置しており、コンテンツの右側に各見出しのページ内アンカーのナビゲーションを自動で生成しています。

AutoAnchorsの実装

HTML

HTMLはシンプルで、各見出しとパラグラフをdiv要素で内包するだけです。
各見出しにidなどを設定する必要はありません。

<div class="content demo">
	<h3>見出し</h3>
	<p>パラグラフ</p>
	<h3>見出し</h3>
	<p>パラグラフ</p>
	<h3>見出し</h3>
	<p>パラグラフ</p>
</div>

JavaScript

「jquery.js」と当スクリプトを外部ファイルとし、下記のスクリプトを記述します。
抽出範囲：div.demo

$(document).ready(function(){
  $("div.demo").autoAnchors( 
    {
      anchor: 'h3',
      title: '<h3>Content</h3>',
      numbering: true
    }
  );
});

上記はオプションを使用したもので、それぞれ下記のようになります。

アンカー

h3

ナビゲーションのタイトル

<h3>Content</h3>

ナンバリング

有り

オプションを使用しない場合は、下記のようになります。

$(document).ready(function(){
  $("div.demo").autoAnchors();
});

アンカー（デフォルトの値）

h2

ナビゲーションのタイトル（デフォルトの値）

無し

ナンバリング（デフォルトの値）

無し

[ad#ad-2]

AutoAnchorsの対応ブラウザ

対応ブラウザは、下記の通りです。

• Internet Explorer 6 and 7
• Firefox 3.5
• Safari 4
• Google Chrome
• Opera 9.6