js返回顶部动画效果

Posted 2020-10-24 捞少

// 返回顶部
    function goTop(){
        // 无动画效果
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;

        // 简单动画效果
        $("html,body").animate({scrollTop:0},500);

        // 由快到慢的效果
        scrollToptimer = setInterval(function () {
            console.log("定时循环回到顶部")
            var top = document.body.scrollTop || document.documentElement.scrollTop;
            var speed = top / 4;
            if (document.body.scrollTop!=0) {
                document.body.scrollTop -= speed;
            }else {
                document.documentElement.scrollTop -= speed;
            }
            if (top == 0) {
                clearInterval(scrollToptimer);
            }
        }, 30); 
    }

参考来自：http://www.cnblogs.com/li-you/p/7275239.html