写APi接口文档时为了方便浏览,需要个动态的菜单,简单的实现了下,代码记录。

代码

<script>
    //获取出现次数
    var num = document.getElementsByClassName('layui-container');
    //定义一个空值
    var li = '';
    //循环获取标题
    for (let index = 0; index < num.length; index++) {
        li = li + '<li><a href="javascript:GoPage(' + index + ');">' + num[index].innerText + '</a></li>';
    }
    //输出标题到指定地点
    document.getElementById('list').innerHTML = li;
    // 跳转到指定位置
    function GoPage(i) {
        //初始高度
        var height = 0;
        for (let index = 0; index < i; index++) {
            //获取每个盒子高度
            var box = document.getElementsByClassName('layui-container')[index].scrollHeight;
            //高度叠加
            height = height + box;
        }
        //跳到指定高度 为Jq方法 需要引入jq库
        $('html').animate({ scrollTop: height }, 500);
    }
</script>
最后修改:2020 年 02 月 17 日
如果觉得我的文章对你有用,请随意赞赏