Pure JS implémente le code permettant de cliquer sur le bouton pour revenir en haut de la page

Avez-vous remarqué que que vous naviguiez sur le site Web sur un ordinateur ou un téléphone mobile, lorsque l'on glisse vers le bas de la page, il y aura un bouton dans le coin inférieur droit invitant l'utilisateur à revenir directement en haut. savez-vous utiliser le JS natif pour renvoyer l'effet Top de la page ? Cet article partagera avec vous le code JS pur permettant de cliquer sur un bouton pour revenir en haut. Il a une certaine valeur de référence et les amis intéressés peuvent s'y référer.

Obtenir l'effet de cliquer sur un bouton pour revenir en haut de la page nécessite de nombreuses connaissances en JavaScript, telles que : function(), document.getElementById(), if function, etc. Si vous ne l'êtes pas bien sûr, vous pouvez vous référer aux articles connexes du site Web PHP chinois ou visiter le Tutoriel vidéo JavaScript.

Exemple de description : L'utilisateur glisse vers le bas de la page. Lorsque la distance entre la barre de défilement et le haut est supérieure à 20 px, un bouton "Retour en haut" apparaît. Cliquez sur le bouton pour revenir directement en haut. le bouton disparaît. Le code spécifique est le suivant :

Partie HTML :

<button onclick="topFunction()" id="myBtn" title="回顶部">JS返回顶部</button>
<div style="background-color:pink;color:white;padding:80px">向下滑动</div>
<div style="background-color:lightgrey;padding:80px 30px 2500px">页面内容，此处省略一万字</div>

Partie CSS :

*{padding: 0;margin: 0;}
   #myBtn {
     display: none;
     position: fixed;
     bottom: 20px;
     right: 30px;
     z-index: 99;
     border: none;
     outline: none;
     background-color: skyblue;
     color: white;
     cursor: pointer;
     padding: 15px;
     border-radius: 10px;
   }
   
   #myBtn:hover {
     background-color: plum;
   }

Partie JavaScript :

// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};
  function scrollFunction() {console.log(121);
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById("myBtn").style.display = "block";
      } else {
          document.getElementById("myBtn").style.display = "none";
      }
  }
   
  // 点击按钮，返回顶部
  function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
  }

L'effet est tel que montré dans l'image :

Ce qui précède vous a expliqué comment utiliser JavaScript natif pour implémenter le code permettant de cliquer sur un bouton pour revenir en haut de la page. Le code est concis et les étapes sont détaillées. Les débutants peuvent l'essayer eux-mêmes et jeter un œil à votre code. J'espère que cet article permettra d'obtenir l'effet de revenir en haut de la page. vous être utile !

Pour plus de didacticiels connexes, veuillez consulter le Manuel de référence en chinois JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!