Beispiel für js-Webseiten-Bildlaufleiste, Bildlaufereignis, Analyse_Javascript-Kenntnisse

Das Beispiel in diesem Artikel beschreibt die Verwendung des Scroll-Ereignisses der js-Webseiten-Scrollleiste. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Wenn Sie den Effekt erzielen, dass js nach oben zurückkehrt, müssen Sie das Bildlaufereignis der Webseite überwachen. Dieses Ereignis ist: window.onscroll. Wenn das Onscroll-Ereignis auftritt, verwenden Sie js, um den scrollTop-Wert der Seite abzurufen. Wenn festgestellt wird, dass scrollTop ein festgelegter Wert ist, wird „Return to Face“ angezeigt

JS-Web-Bildlaufleisten-Bildlaufereignis

<style type="text/css"> 
#top_div{ 
  position:fixed; 
  bottom:80px; 
  right:0; 
  display:none; 
} 
</style> 
<script type="text/javascript"> 
window.onscroll = function(){ 
  var t = document.documentElement.scrollTop || document.body.scrollTop; 
  var top_div = document.getElementById( "top_div" ); 
  if( t >= 300 ) { 
    top_div.style.display = "inline"; 
  } else { 
    top_div.style.display = "none"; 
  } 
} 
</script> 
<a name="top">顶部<a> 
<div id="top_div"><a href="#top">返回顶部</a></div> 
<br /> 
<br /> 
<div> 
这里尽量多些<br />以便页面出现滚动条，限于篇幅本文此处略去 
</div>

Beispielsyntaxerklärung

Definieren Sie zunächst das CSS-Attribut top_div im Style-Tag: position:fixed;display:none ist der Schlüssel

In der Javascript-Anweisung erhält t die Abwärtsscrollposition der Bildlaufleiste, || dient der besseren Kompatibilität
Wenn der Bildlauf 300 (Pixel) überschreitet, setzen Sie die CSS-Anzeigeeigenschaft top_div auf display (inline), andernfalls hide (none)

Der DOCTYPE-Typ muss festgelegt werden und document.documentElement kann verwendet werden, um die Breite und Höhe des Fensters im IE zu ermitteln

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.