Auto Table of Content Plugin

HTML

<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>

CSS

#toc-list {
    width:60%;
    border:1px solid #ccc;
    background-color:#efefef;
    padding:5px 10px 5px 15px;
}

h3:target {
    padding:10px 15px;
}

JavaScript

(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へ &uArr;</a>');
            $('<li><a href="#section-' + i + '">' + $(this).text() + '</a></li>').appendTo('#toc-list ol');
        });
    };
})(jQuery);
$(function() {
    $('article').toc('h3', {
        title: "目次:"
    });
});