El botón de regreso al botón superior en la página de inicio de Taobao es el siguiente: el botón se mostrará después de tirar hacia abajo a una determinada distancia, cuando el mouse se coloque en el botón, el fondo del botón se volverá gris y el icono se convertirá en texto. Haga clic en el botón lentamente de regreso a la parte superior
Primero analicemos qué eventos deben agregarse para lograr tal efecto. Mueva el mouse dentro y fuera del botón, y el rendimiento del botón cambia, por lo que debe agregar los eventos MouseOver y MouseOut al botón. Para escuchar los cambios en la barra de desplazamiento, debe agregar un evento de desplazamiento a la ventana, haga clic en el botón para volver a la parte superior y agregar un evento de clic al botón. Encapsulamos el controlador de eventos en tres funciones Movein, Moveut, Gotop;
Aquí está el código HTML/CSS
La copia del código es la siguiente:
<div>
<div> cabeza </div>
<div> El contenido principal, la altura es 2000px </div>
<divbtn "> volver a arriba </div>
</div>
La copia del código es la siguiente:
.Container {ancho: 980px;
.Content {Altura: 2000px;
#btn {
Posición: fijo;
Abajo: 50px;
Derecha: 0;
Ancho: 54px;
Altura: 55px;
Antecedentes: URL (icons.png) No -Repeat 0 -110px;
tamaño de fuente: 12px;
Línea de altura: 55px;
Text-Align: Center;
TEXT -INDENT: -9999EM;
cursor: puntero;
Pantalla: ninguno;
A continuación se muestra el código JS completo
La copia del código es la siguiente:
Window.adDeventListener ("Load", function () {
var btn = document.getElementById ("btn");
btn.addeventListener ("mouseover", movin, falso);
btn.addeventListener ("mouseout", movimiento, falso);
function MoveIn () {
btn.style.color = "#ffffff";
btn.style.textindent = "0em";
btn.style.backgroundimage = "Ninguno";
btn.style.backgroundcolor = "#FF4401";
}
function MoveOut () {
btn.style.textindent = "-9999em";
btn.style.backgroundimage = "url (icons.png)";
}
función gotop (aceleración, tiempo) {// Modifique los parámetros para ajustar la velocidad para volver a la parte superior
aceleración = aceleración || 0.1;
tiempo = tiempo || 10;
Vel Speed = 1 + Aceleración;
función getScrollTop () {// Obtener la distancia vertical de la barra de desplazamiento
return document.documentelement.scrolltop ||
}
función setScrollTop (valor) {// Establezca la distancia vertical de la barra de desplazamiento.
document.documentelement.scrolltop = value;
document.body.scrolltop = valor;
}
window.onscroll = function () {
var scrollTop = getScrollTop ();
if (scrolltop> 100) {// Al determinar qué tan lejos está la barra de desplazamiento desde la parte superior de la ventana, es 100px
btn.style.display = "bloque";
} demás {
btn.style.display = "Ninguno";
}
};
btn.onclick = functer () {
VAR TIMER = SetInterval (function () {
setScrollTop (Math.Floor (GetScrollTop () /Speed));
if (getscrollTop () == 0)
ClearInterval (temporizador);
}, tiempo);
};
}
gotop (0.2, 8);
}, FALSO);
Por supuesto, existen otros métodos de implementación, y los siguientes son los códigos clave para otros métodos
La copia del código es la siguiente:
btn.onclick = functer () {
ClearInterval (temporizador);
VAR TIMER = SetInterval (function () {
var ahora = scrolltop;
velocidad = (0 - ahora) / 10;
velocidad = math.floor (velocidad);
if (ahora == 0);
ClearInterval (temporizador);
document.documentelement.scrolltop = ahora + velocidad;
document.body.scrolltop = ahora + velocidad;
}, 15);
}
El código aquí se refiere principalmente a otros recursos en Internet y agrega un poco de su propia comprensión. Por supuesto, existen otros métodos de implementación, como Window.ScrollTo () que JavaScript admite lo antes posible. Si lo implementa con JQ, el volumen del código se volverá muy pequeño.
Personalmente, creo que será mucho más fácil aprender primero JavaScript nativo, como descubrir tipos de datos, cierres, herencia, alcance, DOM, CSS, procesamiento de eventos, AJAX, etc., y aprender otros marcos después de la competencia.