相關：《案例：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();
};