jQ实现返回顶部

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

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

返回顶部代码:

<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();
};

方法二:

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();
};