作者:L灬MOXIE | 来源:互联网 | 2023-09-17 21:27
在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象。这是因为移动端的sc
在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象。
这是因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况
为此,移动端判断次数好些,
下面是具体实现代码,兼容pc:
//返回顶部动画
//goTop(500);//500ms内滚回顶部
function goTop(times){
if(!!!times){
$(window).scrollTop(0);
return;
}
var sh=$(‘body‘).scrollTop();//移动总距离
var inter=13.333;//ms,每次移动间隔时间
var forCount=Math.ceil(times/inter);//移动次数
var stepL=Math.ceil(sh/forCount);//移动步长
var timeId=null;
function ani(){
!!timeId&&clearTimeout(timeId);
timeId=null;
//console.log($(‘body‘).scrollTop());
if($(‘body‘).scrollTop()<=0||forCount<=0){//移动端判断次数好些,因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况
$(‘body‘).scrollTop(0);
return;
}
forCount--;
sh-=stepL;
$(‘body‘).scrollTop(sh);
timeId=setTimeout(function(){ani();},inter);
}
ani();
}
关于web移动端返回到顶部的解决方案