web-base--/simple-demo/toc/jquery.autoMenu.js

/*
       这段代码按H2、H3格式生成两级菜单
       写博客按H2、H3格式写，不然生成不了
       Markdown写作按##、###两级目录写
       当然你也可以改写代码成三级菜单
       参考：孤傲苍狼    zhang_derek
       洪卫    2018-5-18
   */
let BlogDirectory = {
    /* 获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）*/
    getElementPosition: function (ele) {
        let topPosition = 0;
        let leftPosition = 0;
        while (ele) {
            topPosition += ele.offsetTop;
            leftPosition += ele.offsetLeft;
            ele = ele.offsetParent;
        }
        return {top: topPosition, left: leftPosition};
    },
    /*获取滚动条当前位置 */
    getScrollBarPosition: function () {
        let scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
        return scrollBarPosition;
    },
    /* 移动滚动条，finalPos 为目的位置，internal 为移动速度 */
    moveScrollBar: function (finalpos, interval) {
        //若不支持此方法，则退出
        if (!window.scrollTo) {
            return false;
        }

        //窗体滚动时，禁用鼠标滚轮
        window.onmousewheel = function () {
            return false;
        };

        //清除计时
        if (document.body.movement) {
            clearTimeout(document.body.movement);
        }

        //获取滚动条当前位置
        let currentpos = BlogDirectory.getScrollBarPosition();

        let dist = 0;
        //到达预定位置，则解禁鼠标滚轮，并退出
        if (currentpos == finalpos) {
            window.onmousewheel = function () {
                return true;
            }
            return true;
        }
        //未到达，则计算下一步所要移动的距离
        if (currentpos < finalpos) {
            dist = Math.ceil((finalpos - currentpos) / 10);
            currentpos += dist;
        }
        if (currentpos > finalpos) {
            dist = Math.ceil((currentpos - finalpos) / 10);
            currentpos -= dist;
        }

        let scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
        window.scrollTo(0, currentpos);//移动窗口
        if (BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出
        {
            window.onmousewheel = function () {
                return true;
            }
            return true;
        }

        //进行下一步移动
        let repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";
        document.body.movement = setTimeout(repeat, interval);
    },

    htmlDecode: function (text) {
        let temp = document.createElement("div");
        temp.innerHTML = text;
        let output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    },

    /*
    创建博客目录，id表示包含博文正文的 div 容器的 id，
    mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），
    interval 表示移动的速度
    */
    createBlogDirectory: function (selector, mt, st, interval) {
        //获取博文正文div容器
        let elem = document.querySelector(selector);
        if (!elem) return false;
        //获取div中所有元素结点
        let nodes = elem.getElementsByTagName("*");
        //创建博客目录的div容器
        let divSideBar = document.createElement('DIV');
        divSideBar.className = 'uprightsideBar';
        divSideBar.setAttribute('id', 'uprightsideBar');
        let divSideBarTab = document.createElement('DIV');
        divSideBarTab.setAttribute('id', 'sideBarTab');
        divSideBar.appendChild(divSideBarTab);
        let h2 = document.createElement('DIV');
        divSideBarTab.appendChild(h2);
        let txt = document.createTextNode('目录导航');
        h2.appendChild(txt);
        let divSideBarContents = document.createElement('DIV');
        divSideBarContents.style.display = 'none';
        divSideBarContents.setAttribute('id', 'sideBarContents');
        divSideBar.appendChild(divSideBarContents);
        //创建自定义列表
        let dlist = document.createElement("dl");
        divSideBarContents.appendChild(dlist);
        let num = 0;//统计找到的mt和st
        mt = mt.toUpperCase();//转化成大写
        st = st.toUpperCase();//转化成大写
        //遍历所有元素结点
        for (let i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeName == mt || nodes[i].nodeName == st) {
                //获取标题文本
                let nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g, "");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签
                nodetext = nodetext.replace(/ /ig, "");//替换掉所有的
                nodetext = BlogDirectory.htmlDecode(nodetext);
                //插入锚
                nodes[i].setAttribute("id", "blogTitle" + num);
                let item;
                switch (nodes[i].nodeName) {
                    case mt:    //若为主标题
                        item = document.createElement("dt");
                        break;
                    case st:    //若为子标题
                        item = document.createElement("dd");
                        break;
                }

                //创建锚链接
                let itemtext = document.createTextNode(nodetext);
                item.appendChild(itemtext);
                item.setAttribute("name", num);
                //添加鼠标点击触发函数
                item.onclick = function () {
                    let pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                    if (!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
                };
                //将自定义表项加入自定义列表中
                dlist.appendChild(item);
                num++;
            }
        }

        if (num == 0) return false;
        /* 鼠标进入时的事件处理 */
        divSideBarTab.onmouseenter = function () {
            divSideBarContents.style.display = 'block';
        }
        /* 鼠标离开时的事件处理 */
        divSideBar.onmouseleave = function () {
            divSideBarContents.style.display = 'none';
        }

        document.body.appendChild(divSideBar);
    }

};