指定した範囲内から特定のエレメント(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」と当スクリプトを外部ファイルとし、