原生js实现侧边导航滚动监听（不用锚点）

js代码部分如下：
1.监听滚动条，滚动一定距离时，返回顶部按钮出现，滚动页面相应导航li的弹出

    var allDiv = document.querySelectorAll("#wrap div");
    var allNavLi = document.querySelectorAll("#nav li");
    function toTopIcon() {
        window.onscroll = function () {
            var d = document.documentElement.scrollTop || document.body.scrollTop;//获取滚动条高度
            var viewd = document.documentElement.clientHeight;//获取可视区高度
            var toTop = document.querySelector("#toTop");//返回顶部按钮
            if (d > viewd) {
                toTop.className = "on";
            } else {
                toTop.className = "";
            }
            for (var i = 0; i < allDiv.length; i++) {
                allDiv[i].index = i;
                if (d >= allDiv[i].offsetTop && d < allDiv[i].offsetTop + 500) {
                    for (var j = 0; j < allDiv.length; j++) {
                        allNavLi[j].className = "";
                        allNavLi[i].className = "on";
                    }
                }
            }
        }
    }

2.点击导航，页面跳转到相应div位置（平滑滚动）
scrollTo默认的是瞬间滚动到坐标位置，把behavior属性设置为smooth就可以支持平滑滚动了，不过缺点是无法设置滚动速率

        for (var i = 0; i < allNavLi.length; i++){
            allNavLi[i].index = i;
            allNavLi[i].onclick = function () {
                for (var j = 0; j < allNavLi.length; j++){
                    window.scrollTo({
                        top:allDiv[this.index].offsetTop,
                        behavior:"smooth"
                    });
                }
            }
        }

3.点击按钮回到顶部（定时器平滑滚动）

        var toTop = document.querySelector("#toTop");
        toTop.onclick = function() {
            var timer = setInterval(toTop,10);
            function toTop() {
                var d = document.documentElement.scrollTop || document.body.scrollTop;
                d -= 80;
                if(d > 0){
                    window.scrollTo(0,d);
                }else {
                    window.scrollTo(0,0);
                    clearInterval(timer);
                    for (var i = 0; i < allNavLi.length; i++){
                        allNavLi[i].index = i;
                        for (var j = 0; j < allNavLi.length; j++){
                            allNavLi[j].className = "";
                            allNavLi[0].className = "on";
                        }
                    }
                }
            }
        }