安装好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);
}