demo代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>楼层跳跃</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
html,body,.lc,#content {
width: 100%;
height: 100%;
}
#content li {
width: 100%;
height: 100%;
text-align: center;
line-height: 300px;
font-size: 30px;
font-weight: 700;
}
#floor {
position: fixed;
left: 20px;
top: 50%;
transform: translateY(-50%);
display: none;
}
#floor li {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 16px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="lc">
<ul id="content">
<li>鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>上衣</li>
</ul>
<ul id="floor">
<li>鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>上衣</li>
</ul>
</div>
<script type="text/javascript">
var content = document.getElementById("content");
var floor = document.getElementById("floor");
var color = ["red","yellow","blue","pink","orange"];
var liHeight = content.children[0].offsetHeight;
var timer = null;
var leader = 0;
var target = 0;
for(var i = 0 ; i < content.children.length ; i++ ){
content.children[i].style.background = color[i];
floor.children[i].style.background = color[i];
}
window.onscroll = function(){
if(document.documentElement.scrollTop >= liHeight){
floor.style.display = "block";
}else{
floor.style.display = "none";
};
// 首先获取当前的位置,然后在触发点击事件的时候,会重新计算当前位置
leader = document.documentElement.scrollTop;
for(var i = 0 ; i < content.children.length ; i++ ){
floor.children[i].index = i;
floor.children[i].onclick = function(){
// 注意:索引值的获取要在定时器外面,否则得到的是NAN
var numindex = this.index;
// 使用定时器要先清除定时器
clearInterval(timer);
timer = setInterval(function(){
// 获取目标位置
target = numindex*liHeight;
var speed = target > leader ? Math.ceil((target - leader)/10) : Math.floor((target - leader)/10);
// 注意:leader计算时一定不要带单位,因为下面还会用到
leader = leader + speed;
window.scrollTo(0,leader);
if(Math.abs(target -leader) <= Math.abs(speed)){
clearInterval(timer);
};
},30);
};
};
};
</script>
</body>
</html>