js实现楼层效果

　　今天自己写个楼层效果，有一点烦躁，小地方犯错误。各位大神来修改不足啊！！！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>楼层切换</title>
  <style>
    *{padding: 0;margin: 0;}
    li{list-style: none;}
    .main img{width: 850px;height: 700px;float: left;}
    .title{width: 850px;height: 50px;text-align: center;line-height: 50px;}
    .floor{position: fixed;top: 20px;right: 20px;display: none;}
    .floor ul li{width: 70px;height: 30px;text-align: center;line-height: 30px;cursor: hand;cursor: pointer}
    .liStyle{background-color: red;}
    .loading{background:url("image/loading.gif") no-repeat center center;}
    #back{cursor: hand;cursor: pointer;}
  </style>
</head>
<body>
<div class="main" id="main">
  <h3 class="title">图片欣赏</h3>
  <img as="image/1.jpg"/>
  <img as="image/2.jpg"/>
  <img as="image/3.jpg"/>
  <img as="image/4.jpg"/>
  <img as="image/5.jpg"/>
  <img as="image/6.jpg"/>
  <img as="image/7.gif"/>
  <img as="image/8.jpg"/>
  <img as="image/9.jpg"/>
  <img as="image/10.jpg"/>
</div>
<div class="floor" id="floor">
  <ul id="floorUl">
    <li>第一张</li>
    <li>第二张</li>
    <li>第三张</li>
    <li>第四张</li>
    <li>第五张</li>
    <li>第六张</li>
    <li>第七张</li>
    <li>第八张</li>
    <li>第九张</li>
    <li>第十张</li>
  </ul>
  <p id="back">返回顶部</p></div><script>  var main = document.getElementById("main");  
var floor = document.getElementById("floor");  
var image = main.getElementsByTagName("img");  
var floorUl = document.getElementById("floorUl");  
var li = floorUl.getElementsByTagName("li");  
var back = document.getElementById("back");  
window.onload = window.onscroll = function(){    
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    
var height = document.documentElement.clientHeight || document.body.clientHeight;    
for(var i = 0;i < image.length; i++){      
image[i].className = "loading";      
if(delay(image[i]).top < scrollTop + height){        
image[i].src = image[i].getAttribute("as");      
}    
}    
if(scrollTop >= image[0].offsetTop){      
floor.style.display = "block";    
}else {      
floor.style.display = "none";    
}    
var num = 0;    
for(var i = 0; i < image.length;i++){      
if(scrollTop >= image[i].offsetTop){        
num = i;      
}      
li[i].className = "";    
}    
li[num].className = "liStyle";    
for(var i = 0;i < li.length;i++){      
li[i].onclick = function(){        
for(var j = 0;j < li.length;j++){          
if(this == li[j]){            
document.documentElement.scrollTop = image[j].offsetTop;            
document.body.scrollTop = image[j].offsetTop;          
}        
}      
}    
}  
}  
var time = null;  
back.onclick = function() {
function goBack(){     
var ss = document.documentElement.scrollTop || document.body.scrollTop;      
ss-=50;      
document.documentElement.scrollTop = ss;      
document.body.scrollTop = ss;      
if(ss<= 0){        
clearInterval(time);      
}    
}    
time = setInterval(goBack,1);  
}  
function delay(obj){    
var l = 0;    
var t = 0;    
while (obj){      
l = l + obj.offsetLeft;      
t = t + obj.offsetTop;      
obj = obj.offsetParent;    
}    
return{left:l,top:t};  
}
</script>
</body>
</html>