这是简单的效果图。
（实现楼层间的跳跃，主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上。）
说楼层跳跃前，先温习下，一般网页在高度较大时，都会在页面的底部位置放个放回顶部的按钮或图片，一点击便有如做火箭般瞬间回到页面的顶部（说时迟，那时快，一句 btn.onclick = function(）{window.scrollTo(0,0)} 就搞定了）。
但是这种瞬间就回到顶部的效果，略显突然，不符合人体工程学，如果要先快后慢，如坐电梯一般回到顶部，该如何实现呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#but{
position:fixed;
bottom:20px;
right:20px;
display:none;
}
</style>
</head>
<body>
<button id="but">返回顶部</button>
<p>两情若是长久时，又岂在朝朝暮暮</p>
<p>两情若是长久时，又岂在朝朝暮暮</p>
<!--省略若干个 -->
</body>
<script>
var weizhi = 0;
var timer = null;
var target = 0;
var but = document.getElementById("but");
window.onscroll = function(){
weizhi = scroll().top;
if(weizhi>1000){
but.style.display = "block";
}else{
but.style.display = "none";
}
}
but.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
var step = Math.floor((target - weizhi)/10);
weizhi = weizhi + step;
window.scrollTo(0,weizhi);
if(weizhi == 0){
clearInterval(timer);
}
},30);
}
function scroll(){
return {
"top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left":window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
</html>
如何缓动，第一次移动的距离大点，之后依次递减，整体上给人的感觉就是移动先是很快，然后逐渐变慢。
var step = Math.floor((target - weizhi)/10);
设置步长，因为目标是回到顶部，所以target的值为0。两者间距离的十分之一作为步长。
weizhi = weizhi + step;
每一次当前的位置都加上了步长，（这里step为负数），所以当前位置就会越来越接近顶部。
了解了底部缓动返回顶部，楼层间的跳跃道理是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}
body,html{
height:100%;
}
ul{
height:100%;
}
ul li{
height:100%;
}
ol{
position:fixed;
top:100px;
left:30px;
}
ol li{
50px;
height:30px;
border:1px solid #aaa;
margin-top:10px;
line-height:30px;
text-align:center;
cursor:pointer;
}
</style>
</head>
<body>
<ul>
<li>袜子</li>
<li>裤子</li>
<li>鞋子</li>
<li>帽子</li>
<li>包包</li>
</ul>
<ol>
<li>袜子</li>
<li>裤子</li>
<li>鞋子</li>
<li>帽子</li>
<li>包包</li>
</ol>
</body>
<script>
var timer;
var target;
var leader=0;
var ul = document.getElementsByTagName("ul")[0];
var ol = document.getElementsByTagName("ol")[0];
var ulLi = ul.children;
var olLi = ol.children;
var arrColor = ["pink","blue","green","red","yellow"];
for(var i=0;i<ulLi.length;i++){
ulLi[i].style.background = arrColor[i];
olLi[i].style.background = arrColor[i];
olLi[i].index = i; //重点，为元素增加一个index属性，之后再点击时，可以通过获取这个属性来判断是点击了那个li元素
olLi[i].onclick = function(){
clearInterval(timer);
target = ulLi[this.index].offsetTop; //通过ol中的li元素的index属性判断对应的ul的li元素距离顶部的距离。
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);
}
},30);
}
}
window.onscroll=function(){
leader = scroll().top;
}
function scroll(){
//将获取scrollTop和scrollLeft的属性进行封装
return {
"top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left":window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
</html>