<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#warp{
width: 800px;
margin: 0 auto;
}
.box{
width: 100%;
height: 700px;
background: yellow;
border: 1px solid blue;
text-align: center;
color: #fff;
font-size: 100px;
}
ul{
list-style: none;
width: 60px;
border-radius: 5px;
position: fixed;
top:300px;
left:100px;
/*display: none;*/
transform: scale(0);
transition: 1s;
}
li{
width: 100%;
height: 60px;
background: yellow;
border: 1px solid red;
text-align: center;
color: #fff;
font-size: 30px;
line-height: 60px;
}
#top{
width: 100%;
height: 500px;
background: pink;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="warp">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>回到顶部</li>
</ul>
</body>
<script type="text/javascript">
var oul=document.getElementsByTagName('ul')[0];
var owarp=document.getElementById('warp');
var oli=document.getElementsByTagName('li');
var obox=document.getElementsByClassName('box');
// alert(oli.length)//11
window.onscroll=function(){
var h=document.documentElement.scrollTop||document.body.scrollTop;
//1判断滚动条的值，让ul显示隐藏
if(h>=300){
// oul.style.display='block';
oul.style.transform='scale(1)'
}else{
// oul.style.display='none';
oul.style.transform='scale(0)'
}
//给最后一个li绑定点击事件回到顶部
oli[oli.length-1].onclick=function(){
timer=setInterval(function(){
h=h-30;
if(h<=0){
clearInterval(timer)
}else{
document.documentElement.scrollTop=document.body.scrollTop=h;
}
},10)
// document.documentElement.scrollTop=document.body.scrollTop=0;
}
//点击任意li找到我们想要的页面
for(var i=0; i<oli.length-1; i++){
oli[i].index=i;
oli[i].onclick=function(){
document.documentElement.scrollTop=document.body.scrollTop=this.index*700+owarp.offsetTop;
}
}
//
// console.log(h)
// 循环的嵌套规则 外面循环一次，里面循环一周
for(var j=0; j<obox.length; j++){
if(h>obox[j].offsetTop-300){
for(var k=0;k<oli.length; k++){
if(oli[j]==oli[k]){
oli[k].style.background='red';
}else{
oli[k].style.background='';
}
}
}
}
}
</script>
</html>
网友评论