wp-content-index文章目录插件使用效果调整

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

 

posted @ 2015-12-02 15:00  Mr. Hu  阅读(555)  评论(0编辑  收藏  举报
Map