关于web移动端返回到顶部的解决方案

标签：

在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移动端返回到顶部的解决方案

标签：

原文地址：http://my.oschina.net/homeemail/blog/513849