<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body,html{
height: 100%;
}
ul{
list-style: none;
height: 100%;
}
ul li{
height: 100%;
}
ol{
list-style: none;
position: fixed;
top:80px;
left: 50px;
}
ol li{
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border: 1px solid #000000;
cursor: pointer;
margin-top: -1px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<script>
//scroll封装
function scroll(){
if(window.pageYOffset!==undefined){
var json={
"top":window.pageYOffset,
"left":window.pageXOffset
}
return json;
}else if(document.compatMode=="CSS1Compat"){
var json={
"top":document.documentElement.scrollTop,
"left":window.documentElement.scrollLeft
}
return json;
}else{
var json={
"top":document.body.scrollTop,
"left":window.body.scrollLeft
}
return json;
}
}
var ul=document.getElementsByTagName("ul")[0];
var ol=document.getElementsByTagName("ol")[0];
var ulLiArr=ul.children;
var olLiArr=ol.children;
var timer=null;
var target=0;
var leader=0;
var arrColor=["pink","blue","green","red","orange"];
for(var i=0;i<arrColor.length;i++){
ulLiArr[i].style.backgroundColor=arrColor[i];
olLiArr[i].style.backgroundColor=arrColor[i];
olLiArr[i].index = i;
olLiArr[i].onclick=function(){
target=ulLiArr[this.index].offsetTop;
clearInterval(timer);
timer=setInterval(function(){
var step=(target-leader)/10;
step=step>0?Math.ceil(step):Math.floor(step);
leader=leader+step;
window.scrollTo(0,leader);
if(Math.abs(target-leader)<=Math.abs(step)){
window.scrollTo(0,target);
clearInterval(timer);
}
},20)
}
}
window.onscroll=function(){
leader=scroll().top;
}
</script>
</body>
</html>
scroll楼层跳跃
最新推荐文章于 2021-07-07 10:56:14 发布