<!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>
网友评论