js barre de défilement de page Web exemple d'événement de défilement compétences d'analyse_javascript

L'exemple de cet article décrit l'utilisation de l'événement scroll de la barre de défilement de la page Web js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Lorsque vous effectuez l'effet de retour de js en haut, vous devez surveiller l'événement de défilement de la barre de défilement de la page Web. Cet événement est : window.onscroll. Lorsque l'événement onscroll se produit, utilisez js pour obtenir la valeur scrollTop de la page Lorsqu'il est jugé que scrollTop est une valeur définie, "Return to Face" s'affiche

.

Événement de défilement de la barre de défilement Web js

<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>

Exemple d'explication de la syntaxe

Définissez d'abord l'attribut css top_div dans la balise de style : position:fixed;display:none est la clé

Dans l'instruction javascript, t obtient la position de défilement vers le bas de la barre de défilement, || est pour de meilleures considérations de compatibilité
Lorsque le défilement dépasse 300 (pixels), définissez la propriété d'affichage CSS top_div sur display (inline), sinon masquez (aucun)

Le type DOCTYPE doit être défini, et document.documentElement peut être utilisé pour obtenir la largeur et la hauteur de la fenêtre dans IE

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.