2015-06-11 03:14
利用原生JavaScript实现带减速滑动效果的回到顶部
回到顶部按钮对于大部分网站来说都是不可缺少的一部分,网上实现功能的代码有很多,阿萌介绍一种利用原生JavaScript实现的带减速效果的回到顶部。
首先确定我们的需求:
1、点击链接页面自动滑动到顶部。
2、在滑动到顶部的过程中,为了更贴合物理效果,越接近顶部滑动速度越慢。
下面说明一下原理
第一需求:获取当前页面滚轮高度,减去固定像素的高度,利用window.scrollTo(x,y)函数改变滚轮高度,然后利用setTimeout迭代调用本身函数,以达到不间断滑动的效果。
第二需求:设定一个加速度变量,修改window.scrollTo(x,y)中的X,Y值,使之每次都除以加速度变量,使之按照一定量改变移动像素,以达到减速滑动的效果。
可能我写的不是太清晰,下面还是看代码吧:
<script type="text/javascript"> function goTop(aspeed, time) { aspeed = aspeed || 0.03; time = time || 12; var x1,y1,x2,y2,x3,y3; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } var x3 = window.scrollX || 0; var y3 = window.scrollY || 0; var x = Math.max(x1, Math.max(x2, x3)); var y = Math.max(y1, Math.max(y2, y3)); var speed = 1 + aspeed; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); if(x > 0 || y > 0) { var turnFun = "goTop(" + aspeed + ", " + time + ")"; window.setTimeout(turnFun, time); } } </script> <a onclick="goTop();return false;" style="cursor:pointer;">TOP</a>
有人也许会觉得长,其实长的原因是调用了三种不同高度值,分别是“document.documentElement.scrollLeft”,“document.body.scrollLeft”,“window.scrollX”,这三种其实作用都是一样的,只是在某些浏览器中会有不同的结果,所以特此大费周章谢了好几段,以保证兼容性和准确性。
如果对此实现方式有问题要问的话,或者感觉代码哪块不合理的地方,希望能留言、邮箱或QQ联系我,谢谢。
标签:javascript