ページの見出しを取得して、サイドにナビゲーションを生成する、というスクリプトのご紹介。jQueryに依存しています。

いわゆる目次のリンクを生成する、というスクリプトです。ドキュメントページなんかに良さそうです。

jQuery Tocible

動作サンプルです。

 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="jquery.tocible.js"></script>

コアとプラグインを読み込みます。

$('#foo').tocible({
      heading: 'h2', //ナビゲーションに組むエレメント
      subheading: 'h3', //ナビゲーションに組むエレメント
      navigation: 'nav', //ナビゲーションを生成する場所
      title: '', //ナビゲーションのタイトル。目次、とか
      hash: false, //ハッシュの有無
      offset: 50, //オフセット
      speed: 800 //スクロールのスピード
      collapsible: true //小見出しをレストとして生成するかどうか
  });

セッティングして完了です。

前にも似たようなスクリプトをご紹介しましたが、今回のとは用途が異なるのでメモとしてかきました。詳細は以下にて。

jQuery Tocible