Daftar Isi Otomatis

Daftar Isi Otomatis

by Ahmad Najiullah

HTML

<h2>H2 Judul</h2>
<article>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt ullamcorper rutrum. Curabitur in mauris nec nunc vulputate accumsan vitae nec eros. Mauris massa urna, tempus eget consequat id, accumsan vel sapien. Vivamus sed dolor lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ultrices mattis justo, nec tincidunt ligula. In hac habitasse platea dictumst. Curabitur tincidunt enim vel venenatis condimentum. Nunc mattis elit in tellus lobortis, in elementum velit fringilla. Suspendisse ac semper elit. Curabitur ultricies quis dolor at ultrices. Ut consectetur adipiscing magna, non pharetra enim hendrerit euismod. Morbi tellus risus, vehicula non massa lobortis, volutpat laoreet leo. Maecenas elementum magna nunc, sit amet condimentum sapien porttitor sit amet. Integer dignissim mi ac turpis placerat, in aliquet dolor molestie. Morbi porttitor iaculis lorem in mattis. <br/>

Cras faucibus odio vitae turpis faucibus gravida. Nullam euismod ligula erat, et iaculis purus vulputate sit amet. Integer egestas mi sit amet sollicitudin facilisis. Nullam eu sagittis tortor. Integer id ante id tortor dictum accumsan non a diam. Quisque aliquam consectetur dolor quis ullamcorper. Sed non posuere tellus, eget vulputate felis. Curabitur ac elit commodo, feugiat ipsum id, euismod leo. Mauris vitae massa eleifend, porta ipsum vel, feugiat augue. 
    </p>
    <h3>Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore...

CSS

body {padding:50px;}

#toc-list {
    width:30%;
    border:1px dashed #999;
    background-color:#eee;
    padding:5px 10px 5px 15px;
}

h3:target {
    padding:10px 15px;
    background-color:grey;
}
p{
text-align: justify;
}

JavaScript

(function($) {
    $.fn.toc = function(o, p) {
        p = $.extend({
            title: "Table of Content"
        }, p);
        this.prepend('<div id="toc-list"  style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><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: "Tabel Konten:"
    });

    $('#toc-list a, a[href="#toc-list"]').on("click", function() {
        var hash = this.hash;
        $('html,body').animate({scrollTop: $(hash).offset().top}, 600, function() {
            window.location.hash = hash;
        });
        return false;
    });

});