Webモバイルがトップに戻るソリューションについて
2347 ワード
PCではscrollTop()を使用して、フローのスクロールアップを実現し、上部に戻るアニメーションを簡単に実現することができます.その後、webモバイル端末を使用しても卵がなく、スクロールがスムーズではなく、カートン、機能しなくなるなどの現象が発生します.
これは,移動端のscrollイベントのトリガが頻繁ではなく,<=0の場合が検出されない可能性があるためである.
そのため、移動端の判断回数が良い、
以下は具体的な実装コードで、pcと互換性があります.
これは,移動端の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();
}