(function($) { $.fn.toc = function(o, p) { p = $.extend({ title: "タイトル" }, p); this.prepend('<div id="toc-list"><strong>' + p.title + '</strong><ol></ol></div>').children(o).each(function(i) { i = i + 1; $(this).attr('id', 'section-' + i).nextUntil(o).after('<a href="#toc-list">Topへ ⇑</a>'); $('<li><a href="#section-' + i + '">' + $(this).text() + '</a></li>').appendTo('#toc-list ol'); }); }; })(jQuery); $(function() { $('article').toc('h3', { title: "目次:" }); });
#toc-list { width:60%; border:1px solid #ccc; background-color:#efefef; padding:5px 10px 5px 15px; } h3:target { padding:10px 15px; }
<article> <h3>Header 01</h3> <p>text text text text text text text text text text </p> <h3>Header 02</h3> <p>text text text text text text text text text text </p> <h3>Header 03</h3> <p>text text text text text text text text text text </p> <h3>Header 04</h3> <p>text text text text text text text text text text </p> <h3>Header 05</h3> <p>text text text text text text text text text text </p> <h3>Header 06</h3> <p>text text text text text text text text text text </p> <h3>Header 07</h3> <p>text text text text text text text text text text </p> <h3>Header 08</h3> <p>text text text text text text text text text text </p> </article>