zoukankan      html  css  js  c++  java
  • 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);
    }
  • 相关阅读:
    呵呵,23号了,难道要通宵???
    开会效果不错
    开完会罗,明天离开这上有点奢华的地方:)
    感冒了,感觉糟透了。。。
    你好,深圳!你好,2010!
    上班 第一天
    。。轻。。。
    那天我生日
    英雄七十寿 无物下冷酒 横刀上闹市 直取数人头
    李孝利 唠叨
  • 原文地址:https://www.cnblogs.com/huhangfei/p/5013041.html
Copyright © 2011-2022 走看看