jQuery：即插即用 返回顶部

相关：《案例：jQuery 返回顶部（返回顶部、微信、评论、反馈）》

撒几乎每一个网站都有返回顶部的需要，在制作zblogPHP模板的时候，我也常用各种返回顶部代码。 有时用的是集成的框架，比如Bootstrap，或者Amaze ~ 妹子 UI，甚至layui，都集成有返回顶部插件，甚至有不同的特效。

但在写非常简单的zblog主题时，不需要乱七八糟的特效，不需要使用框架，就简简单单的手写个模板，这时候非常喜欢用各种即插即用的代码，比如本文介绍的返回顶部：

下面分享出来2个返回顶部代码：

来源：http://www.zhangxinxu.com/wordpress/2017/01/share-a-animation-algorithm-js/

1、返回顶部代码

p>
    button onclick="backToTop();
    ">
    点击我返回顶部/button>
    /p>

javascript

// requestAnimationFrame的兼容处理if (!window.requestAnimationFrame) {
    requestAnimationFrame = function(fn) {
            setTimeout(fn, 17);
    }
    ;
 }
// 滚动到顶部缓动实现// rate表示缓动速率var backToTop = function (rate) {
        var doc = document.body.scrollTop? document.body : document.documentElement;
        var scrollTop = doc.scrollTop;
        var top = function () {
            scrollTop = scrollTop + (0 - scrollTop) / (rate || 2);
                if (scrollTop  1) {
                doc.scrollTop = 0;
                return;
        }
            doc.scrollTop = scrollTop;
            requestAnimationFrame(top);
        }
    ;
        top();
}
    ;
    

 2、返回顶部代码：

HTML代码：

p>
    button id="btnEaseout">
    点击我执行Math.easeout返回顶部/button>
    /p>

javascript

// requestAnimationFrame的兼容处理if (!window.requestAnimationFrame) {
    requestAnimationFrame = function(fn) {
            setTimeout(fn, 17);
    }
    ;
	}
Math.easeout = function (A, B, rate, callback) {
if (A == B || typeof A != 'number') {
    return;
	}
    B = B || 0;
    rate = rate || 2;
var step = function () {
            A = A + (B - A) / rate;
                if (A  1) {
                callback(B, true);
                return;
        }
            callback(A, false);
            requestAnimationFrame(step);
        }
    ;
        step();
}
    ;
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！