Webモバイルがトップに戻るソリューションについて

2347 ワード

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();
}