js平滑滚动回到顶部

优先使用 requestAnimationFrame实现。
实验中发现,IE中的requestAnimationFrame 对象,在页面载入的时候,似乎是不可用的。 所以在 domContentLoaded事件以后再读取,才是安全的。

<script>
//没有输出!
console.log(window.requestAnimationFrame || window.msRequestAnimationFrame );

window.onDomContentLoaded = function(){
//这里就有了。
console.log(window.requestAnimationFrame || window.msRequestAnimationFrame);
}
</script>




function scrollUp(){

//IE10+/Android Browser4.4+/
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
|| function(clb){
return setTimeout(clb,1000/60);
};

var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame
|| window.webkitCancelAnimationFrame || window.msCancelAnimationFrame
|| function(id){clearTimeout(id);};

//document.getElementById("imagePreview").scrollIntoView();
//document.body.scrollTop = "0px";

var top = document.body.scrollTop || document.documentElement.scrollTop;

//滚动时长
var duration = 300; //300ms

//计算步长
var step = top / (duration / ( 1000 / 60)) >> 0; //取整

//window.console && console.log(requestAnimationFrame);

function fn(){

if(top >= 0){
top -= step;
document.documentElement.scrollTop = document.body.scrollTop = top;
fn.rafTimer = requestAnimationFrame(fn);
}else{
document.body.scrollTop = 0;
cancelAnimationFrame(fn.rafTimer);
}
}
fn.rafTimer = requestAnimationFrame(fn);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值