Plugin Daftar Konten Otomatis Sederhana (1 Level)

Tabel Konten
  1. Penggunaan 
  2. Demo 
  3. Menambahkan Efek Animasi 
Simple Auto Table of Content Plugin (1 Level)
(function($) {
    $.fn.toc = function(o, p) {
        p = $.extend({title: "Table of Content"}, 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);

Penggunaan 

$('#parent').toc('h3', {title: "Tabel Konten:"});

Demo 

Lihat Demo

Menambahkan Efek Animasi 

Kode ini berada di luar plugin, dan memiliki cara kerja yang tidak jauh berbeda dengan animasi tombol back to top:

$('#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;
});

Lihat Demo Edit di Sini

11 Komentar

  • Surga Kenari

    ohh saya paham, di atas adalah rangkuman,

    dan di bawah content nya..

    jadi ketika kita klik.. langsung di arahkan ke konten terkait

    thanks for share

  • uki

    Wah ^_^ , tutor ini lah yang saya cari cari,uyeh cocok lagi buat positingan blogazine :D

  • Rosyd Aqbar

    wah .
    ini bisa di beri Efek Even jQuery gk Kang ?
    Kalo bisa, bisa di modifikasi biar lebih Astaganaga nih :D
    Sekalian Request nih Kang yaitu Cara Mengaktifkan Google Code Subversion (SVN) , biar bisa bikin Demo Page :D

  • Taufik Nurrohman

    @Buka(n) Master ? Sudah pernah Saya jawab di sini: #c6165409733265579259

  • Bayu Handono

    mantap kang, eh mas. haha :D

  • Beben Koben

    hihihihi :P
    http://jsfiddle.net/tovic/exsxD/embedded/result,css,html/

  • Taufik Nurrohman

    @Beben Koben Aslinya pakai iframe, tapi Saya buat preloader-nya supaya iframe dimuat setelah halaman sudah sampai ke bawah. Intinya "menunda", bukan "mempercepat" :)

  • Adi Nugraha Y

    bisa diterapkan penggunaannya pake jquery juga ya mas?

  • Unknown

    Bro, ane mau make table of content seperti di link ini :
    http://www.saaraan.com/2013/02/neat-table-of-content-with-jquery-and-css3

    Tapi saya pengennya TOC nya otomatis tercreate berdasarkan H3 ato H2 seperti tips di atas. apa yang harus di rubah ya?

  • Taufik Nurrohman

    Diganti saja ID dan kelas elemen di dalam plugin ini.

  • Alam Perwira Putra

    Yg versi javascript ada ndak ya mas? Hoho

Komentar telah ditutup.