Heim > Web-Frontend > js-Tutorial > Hauptteil

Javascript-Implementierungsmethode für die Schaltfläche „Zurück zum Anfang'_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:20:55
Original
1549 Leute haben es durchsucht

Das Beispiel in diesem Artikel stellt die Implementierungsmethode der Javascript-Schaltfläche „Zurück nach oben“ vor und teilt sie als Referenz mit allen. Der spezifische Inhalt ist wie folgt:

html:

<a href="javascript:;" id="btn" title="回到顶部"></a>
Nach dem Login kopieren

css:

#btn{position:fixed;display:none;}
Nach dem Login kopieren

Skript:

Ermitteln Sie die Höhe der Bildlaufleiste:document.documentElement.scrollTop || document.body.scrollTop

Ermitteln Sie die Höhe des visuellen Bereichs:document.documentElement.clientHeight
JS-Code

window.onload = function(){
  var obtn = document.getElementById('btn');
  //获取页面可视区的高度
  var clientHeight = document.documentElement.clientHeight;
  var timer = null;
  var isTop = true;
  window.onscroll = function(){
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop >= clientHeight){
    //显示按钮
      obtn.style.display = 'block';
    }else {
    //隐藏按钮
      obtn.style.display = 'none';
    }
    if (!isTop){
      clearInterval(timer);
    }
    isTop = false;
  };
  obtn.onclick = function(){    
    //设置定时器
    timer = setInterval(function(){
      //获取滚动条距离顶部的高度
      var osTop = document.documentElement.scrollTop || document.body.scrollTop;
      var ispeed = Math.floor(-osTop / 6);
      document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;
      
      isTop = true;
      if (osTop === 0){
        clearInterval(timer);
      }
    },30);
  };
};
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

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