Heim >Web-Frontend >js-Tutorial >Javascript implementiert nach oben Spezialeffekte_Javascript-Fähigkeiten
HTML:
<input id="btn1" type="button" value="回到顶部" />
CSS:
#btn1{position:fixed;bottom:10px;right:10px;}
JS:
window.onload=funcition(){ var oBtn=document.getElementById("btn"); var timer=null; //申明一个变量看是否为系统还是用户滚动 var sBys=true; window.onscroll=funcition(){ if(!sBys){ clearInterval(timer); } sBys=false; } oBtn.onclick=funcition(){ timer = setInterval(funcition(){ //获取scrollTop var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //当点击按钮回到顶部时计算缓冲速度 var ispeed=Math.floor(-scrollTop/8); if(scrollTop==0){ clearInterval(timer) } sBys=true; document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed; },30) } }
Wissenspunkte:
1. Berechnungsgeschwindigkeit (Pufferung) wird abgerundet
2. Wenn scrollTop==0, muss der Timer gelöscht werden
3. Es muss festgestellt werden, ob der Benutzer oder js die Bildlaufleiste bedient. Wenn es sich um eine Benutzeroperation handelt, löschen Sie den Timer
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.