Die Back -to to -Taste auf der Taobao -Homepage ist wie folgt: Die Taste wird nach dem Abziehen auf eine bestimmte Entfernung angezeigt. Klicken Sie langsam nach oben auf die Schaltfläche zurück
Lassen Sie uns zunächst analysieren, welche Ereignisse hinzugefügt werden müssen, um einen solchen Effekt zu erzielen. Bewegen Sie die Maus in die Taste und aus der Taste, und die Taste -Leistungsschwäche ändert sich, sodass Sie der Taste Mausover- und Mausout -Ereignisse hinzufügen müssen. Um Änderungen in der Bildlaufleiste anzuhören, 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 hinzuzufügen. Wir haben den Event -Handler in drei Funktionen in MoveIn, Moveout, Gotop zusammengefasst.
Hier ist der HTML/CSS -Code
Die Codekopie lautet wie folgt:
<div>
<div> Kopf </div>
<div> Hauptinhalt, Höhe ist 2000px </div>
<Divbtn "> Zurück zu Top </div>
</div>
Die Codekopie lautet wie folgt:
.Container {Breite: 980px;
.Content {Höhe: 2000px;
#BTN {
Position: fest;
unten: 50px;
Rechts: 0;
Breite: 54px;
Höhe: 55px;
Hintergrund: URL (iCons.png) No -Repeat 0 -110PX;
Schriftgröße: 12px;
Zeilenhöhe: 55px;
Text-Align: Mitte;
textindent: -9999em;
Cursor: Zeiger;
Anzeige: Keine;
Unten finden Sie den vollständigen JS -Code
Die Codekopie lautet wie folgt:
window.addeventListener ("laden", function () {
var btn = document.getElementById ("btn");
Btn.AdDeVentListener ("Mouseover", Movin, False);
Btn.AdDeVentListener ("Mouseout", MoveOut, False);
Funktion moveIn () {
btn.style.color = "#ffffff";
btn.style.textindent = "0em";
btn.style.backgroundimage = "Keine";
btn.style.backgroundcolor = "#ff4401";
}
Funktion moveout () {
btn.style.textindent = "-9999em";
btn.style.backgroundimage = "url (icons.png)";
}
Funktion GOTOP (Beschleunigung, Zeit) {// Ändern Sie die Parameter, um die Geschwindigkeit anzupassen, um nach oben zurückzukehren
Beschleunigung = Beschleunigung || 0,1;
Zeit = Zeit || 10;
var speed = 1 + Beschleunigung;
Die Funktion getScrolltop () {// Holen Sie sich den vertikalen Abstand der Scrollleiste
return document.documentElement.scrolltop ||.
}
Funktion SetScrolltop (Wert) {// Setzen Sie den vertikalen Abstand der Bildlaufleiste.
document.documentElement.scrolltop = value;
document.body.scrolltop = value;
}
window.onscroll = function () {
var scrolltop = getCrolltop ();
if (scrolltop> 100) {// Bei Bestimmung, wie weit die Bildlaufleiste vom oberen Ende des Fensters entfernt ist, ist es 100px
btn.style.display = "block";
} anders {
btn.style.display = "none";
}
};
btn.onclick = function () {
var timer = setInterval (function () {
setScrolltop (math.floor (getCrolltop () /Geschwindigkeit) // diese Codezeile ist der Schlüssel.
if (getCrolltop () == 0)
ClearInterval (Timer);
}, Zeit);
};
}
Gotop (0,2, 8);
}, FALSCH);
Natürlich gibt es andere Implementierungsmethoden, und die folgenden sind die Schlüsselcodes für andere Methoden
Die Codekopie lautet wie folgt:
btn.onclick = function () {
ClearInterval (Timer);
var timer = setInterval (function () {
var jetzt = scrolltop;
Speed = (0 - jetzt) / 10;
Speed = Math.Floor (Geschwindigkeit);
if (jetzt == 0);
ClearInterval (Timer);
document.documentElement.scrolltop = jetzt + Geschwindigkeit;
document.body.scrolltop = jetzt + Geschwindigkeit;
}, 15);
}
Der Code hier bezieht sich hauptsächlich auf andere Ressourcen im Internet und fügt ein wenig von Ihrem eigenen Verständnis hinzu. Natürlich gibt es andere Implementierungsmethoden wie window.scrollto (), die JavaScript frühestens unterstützt. Wenn Sie es mit JQ implementieren, wird das Codevolumen sehr klein
Persönlich denke ich, dass es viel einfacher sein wird, native JavaScript zu lernen, wie z.