点击按钮实现缓慢返回顶部

最新推荐文章于 2024-09-01 10:53:15 发布

weixin_34208283

最新推荐文章于 2024-09-01 10:53:15 发布

阅读量762

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gxsyj/p/5944669.html

在JQ中可以直接使用animate()来实现动画，在JS中可以通过定时器setInterval()来实现。

html

<a href="javascript:;" id="backTop">返回顶部</a>

JQ实现方法：

$('#backTop').bind('click',function(){
    $('html,body').animate({scrollTop:0});
});

注:html,body需一起使用。

JS实现方法：

var backTop=document.getElementById('backtop'),
topH,//滚动条距离顶部高度
backTopSpeed,//滚动速度
backTopTimer;//定时器
backtop.addEventListener('click',function(){
    var backTopTimer = setInterval(function(){
        topH = document.documentElement.scrollTop || document.body.scrollTop;
        backTopSpeed = Math.floor(-topH/8);//取整
        if(topH>0){
            document.documentElement.scrollTop = document.body.scrollTop = topH+backTopSpeed;
        }else{
            clearInterval(backTopTimer);
        }
    },10);
});