Plugin Daftar Konten Otomatis Sederhana (1 Level)

Published by Concept Phone Sabtu, 14 Juli 2018

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

Sumber https://www.dte.web.id/