这是简单的效果图。
(实现楼层间的跳跃,主要依靠的是 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{ width: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>