安装好wp-content-index后进行如下设置:
其中标红处必须标红,用于检索锚点。
在文章页面添加如下js代码:
$(function() { var wpindex = $("#content-index"); if (wpindex.length > 0) { var wpindex_top = wpindex.offset().top - 65; var wpindex_left = wpindex.offset().left; var wpindex_ttop = wpindex.offset().top; var ul = $("#content-index-contents"); var lis = ul.find("li"); $.each(lis, function(i) { $(this).find("a").attr("href", "javascript:scorllTo(" + i + ")"); }); $(window).scroll(function() { if ($(window).scrollTop() > wpindex_top) { if (wpindex.css("position") != "fixed") { wpindex.css("position", "fixed"); wpindex.css("left", wpindex_left + "px"); wpindex.animate({ left: -28, top: 150 }, 1500); } } else { if (wpindex.css("position") != "relative") { wpindex.css("position", "relative"); wpindex.css("top", "0px"); wpindex.animate({ left: 0, top: 0 }, 1000); } } }); } jQuery(".content-index-heading").find("em").hide();//改行代码控制显示是否显示每一个锚点编号,自行去掉或保留 }) function scorllTo(i) { var hs = jQuery(".content-index-heading"); var top = jQuery(hs[i]).offset().top; jQuery("body,html").animate({ scrollTop: top - 60 }, 600); }