Pure JS implementiert den Code zum Klicken auf die Schaltfläche, um zum Seitenanfang zurückzukehren

Ist Ihnen aufgefallen, dass, egal ob Sie die Website auf einem Computer oder einem Mobiltelefon durchsuchen, in der unteren rechten Ecke eine Schaltfläche angezeigt wird, die den Benutzer auffordert, direkt nach oben zurückzukehren? Dann Sie Wissen Sie, wie Sie natives JS verwenden, um den Top-Effekt der Seite zurückzugeben? In diesem Artikel wird Ihnen der reine JS-Code zum Klicken auf eine Schaltfläche zur Verfügung gestellt, um zum Anfang zurückzukehren. Er hat einen gewissen Referenzwert und interessierte Freunde können darauf verweisen.

Um den Effekt zu erzielen, dass durch Klicken auf eine Schaltfläche zum Seitenanfang zurückgekehrt wird, sind umfangreiche JavaScript-Kenntnisse erforderlich, z. B.: function(), document.getElementById(), if-Funktion usw. Falls nicht Natürlich können Sie sich auch auf die verwandten Artikel der PHP-Chinese-Website beziehen oder das JavaScript-Video-Tutorial besuchen.

Instanzbeschreibung: Wenn der Abstand zwischen der Bildlaufleiste und dem oberen Rand größer als 20 Pixel ist, wird die Schaltfläche „Zurück nach oben“ angezeigt Die Schaltfläche verschwindet. Der spezifische Code lautet wie folgt:

HTML-Teil:

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

CSS-Teil:

*{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;
   }

JavaScript-Teil:

// 当网页向下滑动 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;
  }

Der Effekt ist wie im Bild dargestellt:

Oben haben wir Ihnen erklärt, wie Sie natives JavaScript verwenden, um den Code zum Klicken auf eine Schaltfläche zu implementieren, um zum Anfang zurückzukehren Der Code ist prägnant und die Schritte sind detailliert, um zu sehen, ob Ihr Code zum Anfang der Seite zurückkehren kann.

Weitere verwandte Tutorials finden Sie im JavaScript Chinese Reference Manual

Das obige ist der detaillierte Inhalt vonPure JS implementiert den Code zum Klicken auf die Schaltfläche, um zum Seitenanfang zurückzukehren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!