Heim > Artikel > Web-Frontend > Native js erkennt den Effekt einer langsamen Rückkehr nach oben, wenn auf die Schaltfläche Taobao homepage_javascript skills geklickt wird
Native js erkennt den Effekt einer langsamen Rückkehr nach oben, wenn auf die Schaltfläche Taobao homepage_javascript skills geklickt wird
- WBOYOriginal
- 2016-05-16 16:53:101764Durchsuche
Der Back-to-Top-Button auf der Taobao-Homepage sieht so aus: Der Button wird erst angezeigt, wenn er bis zu einem bestimmten Abstand nach unten gezogen wird. Wenn die Maus auf dem Button platziert wird, wird der Hintergrund des Buttons grau und das Symbol ändert sich in Text. Klicken Sie auf die Schaltfläche, um langsam zum Anfang zurückzukehren
Lassen Sie uns zunächst analysieren, welche Ereignisse hinzugefügt werden müssen, um einen solchen Effekt zu erzielen. Wenn sich die Maus in die Schaltfläche hinein- und herausbewegt, ändert sich das Verhalten der Schaltfläche. Daher müssen Sie der Schaltfläche Mouseover- und Mouseout-Ereignisse hinzufügen. Um auf Änderungen in der Bildlaufleiste zu warten, müssen Sie dem Fenster ein Bildlaufereignis hinzufügen, auf die Schaltfläche klicken, um nach oben zurückzukehren, und der Schaltfläche ein Klickereignis hinzufügen. Wir kapseln den Event-Handler in drei Funktionen: moveIn, moveOut, goTop;
Der HTML-/CSS-Code ist unten angegeben
Code kopieren
Schriftgröße: 12px;
text-align: center; Text-Einzug: -9999em;
Cursor: Zeiger;
Anzeige: keiner;
Das Folgende ist der vollständige js-Code
Code kopieren
Der Code lautet wie folgt:
var btn = document.getElementById( "btn");
btn.addEventListener("mouseover", moveIn, false);
time = time |. scrollTop;
}
function setScrollTop(value) { //Legen Sie den vertikalen Abstand der Bildlaufleiste fest. Der Schlüssel zum Erreichen des Effekts besteht darin, den vertikalen Abstand der Bildlaufleiste innerhalb eines kurzen Intervalls zu ändern scrolling effect
document.scrollTop = value;
document.body.scrollTop = value;
}
window.onscroll = function() {
var scrollTop(); 🎜>if (scrollTop > 100) { // Anzeige bei der Beurteilung, wie weit die Bildlaufleiste vom oberen Rand des Fensters entfernt ist, hier sind es 100 Pixel
btn.style.display = "block"
} else {
btn.style.display = "none ";
}
};
btn.onclick = function () {
var timer = setInterval(function() {
setScrollTop (Math.floor(getScrollTop() / speed)) ; //Diese Codezeile ist der Schlüssel. Ermitteln Sie den vertikalen Abstand der Bildlaufleiste, dividieren Sie ihn durch die Geschwindigkeit und legen Sie dann den vertikalen Abstand zur Bildlaufleiste fest
if (getScrollTop() == 0)
clearInterval(timer);
};
}
goTop(0.2, 8); false);
Natürlich gibt es andere Implementierungsmethoden. Die Schlüsselcodes anderer Methoden sind unten angegeben
Code kopieren
Der Code lautet wie folgt:
btn.onclick = function() {
clearInterval(timer);
var timer = setInterval(function() {
var now = scrollTop; //Vertikaler Abstand der Bildlaufleiste
speed = (0 - now) /
speed = Math.floor(speed); 🎜>clearInterval(timer);
document.documentElement.scrollTop = jetzt Geschwindigkeit; //Standardmodus Browser unter
document.body.scrollTop = jetzt Geschwindigkeit; //Browser im seltsamen Modus
}, 15) ;
}
Der Code hier bezieht sich hauptsächlich auf andere Ressourcen im Internet und fügt ein wenig meines eigenen Verständnisses hinzu. Natürlich gibt es auch andere Implementierungsmethoden, wie zum Beispiel window.scrollTo(), die JavaScript zum ersten Mal unterstützt hat. Wenn Sie jQ zum Implementieren verwenden, wird die Codemenge sehr gering. Sie können auf w3cplus verweisen
Persönlich denke ich, dass Sie zuerst natives JavaScript gut lernen sollten, z. B. das Verständnis von Datentypen, Schließungen, Vererbung usw. Umfang, DOM, CSS und Ereignisverarbeitung, Ajax usw. Es wird viel einfacher sein, andere Frameworks zu erlernen, wenn Sie damit vertraut sind.