论如何用js实现京东楼梯效果（很多bug批评改正）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
text-decoration: none;
}
body,html{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid black;
text-align: center;
font-size: 50px;
line-height: 500px;
}
#div1{
position: fixed;
right: 100px;
top: 0px;
z-index: 200;
width: 152px;
height: 700px;
border: none;
}
#div1 a{
width: 150px;
height: 80px;
border: 1px solid black;
display: flex;
}
#div1 a:hover{
background: #B3DAF9;
}
#header{
width: 100%;
height: 500px;
text-align: center;
line-height: 500px;
background: forestgreen;
display: block;
}
#footer{
width: 100%;
height: 500px;
background: blueviolet;
text-align: center;
line-height: 500px;
display: block;
}
</style>
</head>

<body>
    <p id="header">
            头部
    </p>
    <div style="background: saddlebrown;" class="list">1</div>
    <div style="background: firebrick;" class="list">2</div>
    <div style="background: seagreen;" class="list">3</div>
    <div style="background: navy;" class="list">4</div>
    <div style="background: aqua;" class="list">5</div>
    <div style="background: pink;" class="list">6</div>
    <p id="footer">
        底部
    </p>
    
    <p id="div1">
        <a href="##">1</a>
        <a href="##">2</a>
        <a href="##">3</a>
        <a href="##">4</a>
        <a href="##">5</a>
        <a href="##">6</a>
        <a href="##">置顶</a>
    </p>
</body>
<script type="text/javascript">
    var odiv = document.querySelectorAll(".list")
    var pp   = document.getElementById("#div1")
    var oas  = document.getElementsByTagName("a");//获取所有a
    time = null; //定义一个时间为空
    
    for(var i = 0 ; i<oas.length ; i++){
        oas[i].index = i;//把下标付给i
        oas[i].onclick = function(){
            console.log(this.index)
            index = this.index//把他的index付给index
            if(document.body.scrollTop<odiv[index].offsetTop){
            //如果卷起的高度小于你点的某一个div的offsettop值，说明你的某个div在可视区域下
                time = setInterval(function(){//设定定时器
                    document.body.scrollTop+=10//让scrollTop值一直变大，也就是往下，它下offsetTop上
                    if(document.body.scrollTop<odiv[index].offsetTop){//如果他俩相比不在成立
                        document.body.scrollTop = document.body.scrollTop//就让scrollTop=它的本身
                    }else{
                        clearInterval(time)//清除定时器
                    }
                })
            }else if(document.body.scrollTop>odiv[index].offsetTop){
            //如果卷起的高度大于你点的某一个div的offsettop值，说明你的某个div在可视区域上，于上相反    
                time = setInterval(function(){
                    document.body.scrollTop-=10
                    if(document.body.scrollTop>odiv[index].offsetTop){
                        document.body.scrollTop = document.body.scrollTop
                    }else{
                        clearInterval(time)
                    }
            })
        }
    }
        oas[6].onclick = function(){//单独点击第七个a标签
            console.log(this.index)//打印一下看看
            time = setInterval(function(){
                document.body.scrollTop-=10//这里的- = 就是向上
                if(document.body.scrollTop>=1){
                    document.body.scrollTop = document.body.scrollTop
                }else{
                    clearInterval(time)
                }
            })
        }
    }
</script>

</html>