阿萌的程序小屋

萌物控重度患者与您一起畅游技术与梦想的世界

利用原生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联系我,谢谢。

如有朋友感觉我的博文或代码有问题,愿能给予我宝贵的意见!Thanks

另注:转载请随意,但请带上本文地址,万分感谢。

http://www.wangmengyu.cn/?p=429

这就是真的真的是传说中的公告牌的说~~
暂且努力发展中~~

性别:男  年龄:20岁
现居:江苏  南京  浦口区
标语:萌即是一切