运动-模拟返回顶部
第一步：獲取底部的那個按鈕對象，默認的情況下那個按鈕對象是不可見的。可見的條件的是滾輪距離頂部有距離。 var oBtn=document.getElementById('btn1');
第二步：添加滾輪事件。 (1). 獲取滾輪距離頂部的距離。如果距離大于0，就將按鈕對象可見。 var scrollT=document.documentElement.scrollTop||document.body.scrollTop; if(scrollT >0){ oBtn.style.display='block'; }else{ oBtn.style.display='none'; };
第三步： (1).獲取滾動條到頂部的距離，這個距離就是滾動條需要向上滾動到頂部的全部路程。 var scrollT=document.documentElement.scrollTop||document.body.scrollTop;//我們假設是300px (2).我們的目標是回到頂部，這個時候滾動條距離頂部的距離是0. (3). 滾動條運動了多少距離。結束位置-開始位置=dis=0-300=-300px; (4). 確定總共需要運行的次數。 var count=Math.floor(1000/30); var n=0;
第四步：開定時器運行 (1)定時器每運行一次，n+1(n代表當前走的次數) (2).我們已經在上面獲取了滾動條距離頂部的距離是： var scrollT=document.documentElement.scrollTop||document.body.scrollTop;//我們假設是300px (2)計算走的比例，再將比例乘以總共需要走的距離，得到當前走的距離 var a=n/count; 當前走的距離： dis*a; 還剩了多少距離：就是總的距離減去我們剛才走的距離。 cur=scrollT+dis*a; (3)設置滾動條距離頂部的距離 document.documentElement.scrollTop=document.body.scrollTop=cur; (4)如果n==count，代表路程全部走完，關閉定時器 if(n==count){ clearInterval(timer); }
第五步:處理問題 (1). 當onclick事件執行的時候，定時器執行，會觸發onscroll事件，setInterval未執行完的時候，onclick不可以再次點擊 (2)onscroll事件觸發的時候，滾動條往上滾動的過程中，即使setInterval還未執行完，我們也可以通過鼠標滾動，讓滾動條再次往下滾動
處理方法：設置開關，控制，當bSin=true的時候，可執行，當bSin=false的時候不可以執行
?完整代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>input{position: fixed;right: 0;bottom: 0;display: none;}</style><script>window.οnlοad=function(){ var oBtn=document.getElementById('btn1'); var timer=null; //bSin是一個標志位 //bSin：true---->代表底部那個按鈕對象是可以使用的 //bSin：false---->代表底部那個按鈕對象是不可以使用的 var bSin=false; window.οnscrοll=function(){ if(bSin){ clearInterval(timer) } console.info(1); bSin=true; var scrollT=document.documentElement.scrollTop||document.body.scrollTop; if(scrollT >0){ oBtn.style.display='block'; }else{ oBtn.style.display='none'; }; }; oBtn.οnclick=function(){ var scrollT=document.documentElement.scrollTop||document.body.scrollTop; var dis=0-scrollT; var count=Math.floor(1000/30); var n=0; timer=setInterval(function(){ bSin=false; n++; var a=n/count; var cur=scrollT+dis*a; document.documentElement.scrollTop=document.body.scrollTop=cur; if(n==count){ clearInterval(timer); } },30); } }; </script> </head> <body style='height: 3000px'> <input type="button" value="返回頂部" id='btn1'> </body> </html>轉載于:https://www.cnblogs.com/xuxiaozhi/p/10209065.html
總結
- 上一篇： java ListMapString,O
- 下一篇： Task执行多次