[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

sponsors

top of page

©2018 coliss