Heim > Web-Frontend > js-Tutorial > Javascript implementiert nach oben Spezialeffekte_Javascript-Fähigkeiten

Javascript implementiert nach oben Spezialeffekte_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 16:00:48
Original
1214 Leute haben es durchsucht

HTML:

<input id="btn1" type="button" value="回到顶部" />
Nach dem Login kopieren

CSS:

#btn1{position:fixed;bottom:10px;right:10px;}
Nach dem Login kopieren

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)
  }
}
Nach dem Login kopieren

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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage