• 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);
    }
  • 相关阅读:
    添加事件(jquery)
    闭包导致的问题
    学习之js绑定事件
    第二条 一个类如果有多个参数,考虑用Builder构造者模式
    用Intellij IDEA 创建第一个maven项目!
    OrderSessionHelper查看订单在session是否存在的辅助类
    css——overflow
    css——盒子
    css——外部样式
    css——权重叠加
  • 原文地址:https://www.cnblogs.com/huhangfei/p/5013041.html
Copyright © 2020-2023  润新知