Implementierung der Schaltfläche „Zurück nach oben' basierend auf Javascript_Javascript-Kenntnissen

Wenn eine Webseite zu viel Inhalt hat, werden die Daten in geteilten Bildschirmen angezeigt. Wenn es viele Bildschirme gibt, haben die vom Benutzer aufgerufenen Daten das Ende der Seite erreicht und es wird einige Zeit dauern, bis sie wieder angezeigt werden Nach oben. Dies kann sich negativ auf die Benutzererfahrung auswirken. Daher verwenden Webseiten mit vielen Seitendaten jetzt eine Schaltfläche „Zurück nach oben“, um schnell zum Anfang der Webseite zu springen Jetzt implementieren wir eine solche Funktion.

Wir werden auf dieser Seite keine Daten schreiben. Fügen Sie einfach ein Tag als Schaltfläche hinzu, um nach oben zurückzukehren, und geben Sie ihr einen Klassennamen: top.

<a href="#" class="top">顶部</a>

Dann legen Sie das Stylesheet fest:

body {
  height: 3000px;
}

.top {
  position: absolute;
  top: 120px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  text-align: center;
  background-color: #666666;
  color: #ffffff;
  right: 10px;
  transition: all 0.3s;
   visibility: hidden;
}
.top:hover {
  background-color: #ff3300;
}

Hier ist der Körper auf eine Höhe von 3000 eingestellt, hauptsächlich um der Seite einen Scroll-Effekt zu verleihen. Die Schaltflächen werden im Allgemeinen etwas tiefer auf der rechten Seite der Webseite platziert.

Wir müssen auch analysieren, dass diese Schaltfläche definitiv nicht angezeigt wird, wenn sich die vom Benutzer besuchte Webseite oben auf der Seite befindet. Daher verwenden wir hier die Sichtbarkeit, um zu steuern, ob die Schaltfläche angezeigt wird oder nicht.

Die Schnittstelle ist sehr einfach. Lassen Sie uns zunächst die Implementierung von JS analysieren.

Diese Schaltfläche wirkt sich zunächst auf die gesamte Webseite aus, daher muss die Scroll-Ereignisüberwachung für das gesamte Fenster festgelegt werden

window.onscroll = function (e) {...}

In diesem Fall kontrollieren wir die Auf- und Ab-Position der Schaltfläche „Zurück nach oben“ und ob sie angezeigt werden soll. Schließen Sie zunächst die Kontrolle der Auf- und Ab-Position ab.

Um die obere und untere Position zu steuern, müssen wir die Höhe des ScrollTops und die Höhe der Einzelbildschirmanzeige der Webseite berechnen. Wenn der Benutzer die Seite betritt, platzieren wir diese Schaltfläche in der mittleren rechten Position Die Berechnung lautet derzeit standardmäßig:

var n_half_height = window.screen.height / 2;

Weisen Sie diesen Wert dem obersten Attribut der Schaltfläche zu.

Wenn der Benutzer dann scrollt, bleibt die Position definitiv unverändert und die Berechnung sollte zu diesem Zeitpunkt

lauten

var n_stop = e.target.scrollingElement.scrollTop; //获取scrollTop的高度
var n_top = n_stop + n_half_height;//得到位置

Dies ist das E-Objekt, das das Parameterereignis in Onsroll ist. Andere Browser wurden nicht getestet. Wenn Kompatibilität erforderlich ist, können Sie damit umgehen Jede Schriftrolle muss ihre Höhe berechnen, daher sollte diese im Onscroll-Ereignis platziert werden. Weisen Sie diesen Wert dann dem oberen Attribut der Schaltfläche zu

Vergessen Sie natürlich eines nicht: Wenn scrollTop 0 ist, muss die Schaltfläche nicht angezeigt werden. Wenn es größer als 0 ist, muss die Schaltfläche angezeigt werden Sichtbarkeitsattribut, um es zu steuern. Auf diese Weise ist der Code vollständig Vollständiger Javascript-Code

Endgültige Effektanzeige:

var ele_body = document.body;
var ele_top = document.getElementsByClassName("top")[0];
var n_half_height = window.screen.height / 2;
ele_top.style.top = n_half_height + "px";
window.onscroll = function (e) {
 var n_stop = e.target.scrollingElement.scrollTop;
 if (n_stop === 0 ) {
  ele_top.style.visibility = "hidden";
 }else {
  ele_top.style.visibility = "visible";
 }
 var n_top = n_stop + n_half_height ;
 ele_top.style.top = n_top + "px";
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.