(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 ⇑</a>');
$('<li><a href="#section-' + i + '">' + $(this).text() + '</a></li>').appendTo('#toc-list ol');
});
};
})(jQuery);
Penggunaan
$('#parent').toc('h3', {title: "Tabel Konten:"});
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;
});
0 komentar:
Posting Komentar