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();
};
- QQ群:253510359
- 建议:VPS商家层出不穷,根据需要购买,切莫剁剁剁!
- 评测:很多VPS虽已评测,但网络环境改变稳定性,速度也会随之改变.评测只能作为一般性参考.不负任何法律,道义责任.
- 申明:所有vps,域名,服务器优惠信息均来自网络公开内容,由于水平有限不免有谬误.请以官方为准.