Cómo escribir
【1】 Punto de anclaje
El uso de enlaces de anclaje es un simple regreso a la parte superior. Esta implementación coloca principalmente un enlace de anclaje con un nombre específico en la parte superior de la página, y luego coloca un enlace para volver al ancla debajo de la página. El usuario hace clic en el enlace para volver a la posición superior donde se encuentra el ancla.
[Nota] La información detallada sobre los puntos de anclaje se moverá aquí
<Body style = "altura: 2000px;"> <div id = "topanchor"> </div> <a href = "#topanchor" Style = "Posición: fijo; derecho: 0; abajo: 0"> Volver a arriba </a> </fody>
【2】 Scrolltop
La propiedad ScrollTop indica el número de píxeles ocultos sobre el área de contenido. Cuando el elemento no se desplaza, el valor de ScrollTop es 0. Si el elemento se desplaza verticalmente, el valor de ScrollTop es mayor que 0 e indica el ancho de píxel del contenido invisible por encima del elemento.
Dado que ScrollTop es redactado, ScrollTop se puede usar para lograr la función de nuevo a la parte superior
[Nota] Los detalles de los problemas de compatibilidad de ScrollTop en la página se mueven aquí
<Body style = "Height: 2000px;"> <Button ID = "Test" Style = "Posición: fijo; Right: 0; Bottom: 0"> Back to top </boton> <script> test.onclick = function () {document.body.scrolltop = document.documentelement.scrolltop = 0;} </script> </foding>【3】 scrollto ()
El método ScrollTO (x, y) desplaza el documento que se muestra en la ventana actual, de modo que los puntos especificados por las coordenadas x e y en el documento se encuentran en la esquina superior izquierda del área de visualización.
Establecer scrollto (0,0) para lograr el efecto de regresar a la parte superior
<Body style = "Height: 2000px;"> <Button ID = "Test" Style = "Posición: FIJADO; DERECHO: 0; Bottom: 0"> Back to arriba </botón> <script> test.onclick = function () {scrollto (0,0);} </script> </body>【4】 Scrollby ()
Método Scrollby (x, y) desplazados el documento que se muestra en la ventana actual, x e y especifican la cantidad relativa de desplazamiento
Simplemente use la longitud de desplazamiento de la página actual como parámetro y desplácese en reversa, puede lograr el efecto de volver a la parte superior.
<Body style = "Height: 2000px;"> <Button ID = "Test" Style = "Posición: fijo; Right: 0; Bottom: 0"> Back to arriba </botón> <script> test.onclick = function () {var top = document.body.scrolltoptop || document.documentelement.scrolltopscrollby (0, -top);} </script> </body>【5】 ScrolliNtoview ()
Element.ScrollItoview Method se desplaza el elemento actual y ingresa al área visible del navegador.
Este método puede aceptar un valor booleano como parámetro. Si es cierto, significa que la parte superior del elemento está alineada con la parte superior de la parte visible del área actual (siempre que el área actual sea desplazable); Si es falso, significa que la parte inferior del elemento está alineada con la cola de la parte visible del área actual (siempre que el área actual sea desplazable). Si no se proporciona este parámetro, el valor predeterminado es verdadero
El principio de usar este método es similar al principio de usar puntos de anclaje. Establezca el elemento de destino en la parte superior de la página. Cuando la página se desplaza, el elemento de destino se desplaza fuera del área de la página. Haga clic en el botón Regreso al botón superior para volver a la posición original y lograr el efecto esperado.
<Body style = "Height: 2000px;"> <div id = "Target"> </div> <Button ID = "Test" Style = "Posición: fijo; Right: 0; Bottom: 0"> Volver a arriba </botón> <script> test.onclick = function () {Target.scrolliToview ();} </script> </foding>Mejorado
Lo siguiente mejora la función de regreso a la parte superior
【1】 Mostrar mejora
Use CSS para dibujar y convertir "de nuevo en la parte superior" en un gráfico visual (si es compatible con el navegador IE8, use imágenes en su lugar)
Use pseudo-elemento CSS y efectos de pseudo-palo. Cuando el mouse se mueve al elemento, el texto de regreso a la parte superior se muestra y no aparece cuando se mueve.
<syle> .Box {posición: fijo; derecha: 10px; fondo: 10px; altura: 30px; ancho: 50px; text-align: centro; almohadilla: 20px; Color de fondo: LightBlue; Border-Radius: 20%; Overflow: Hidden;}. Box: Hover: Before {Top: 50%}. Box: Hover .Box-In {Visibility: Hidden;}. Box: Before {Position: Absolute; Top: -50%; Izquierda: 50%; Transformar: Translato (-50%,-50%); Contenido: 'Atrás a la parte superior; 40px; color: peru; font-weight: bold;} .box-in {visibilidad: visible; visual id = "box"> <div> </div> </div> </body>【2】 Mejora de animación
Para agregar animación a la parte superior, la barra de desplazamiento vuelve a la parte superior a cierta velocidad
Hay dos tipos de animaciones: uno es CSS Animation, que requiere cambios de estilo y transición; El otro es JavaScript Animation, que utiliza un temporizador para implementarlo.
En las 5 implementaciones anteriores, los métodos ScrollTop, ScrollTO () y Scrollby () pueden agregar animaciones, y dado que no hay un cambio de estilo, solo se pueden agregar animaciones de JavaScript
El temporizador se puede usar, setInterval, setTimeOut y requestAnimationFrame. Lo siguiente es utilizar el temporizador de mejor rendimiento.
[Nota] IE9-Browser no admite este método, puede usar SetTimeout para compatibilidad
1. Agregue el efecto de animación de scrolltop
Usando un temporizador, reduzca el valor de desplazamiento en 50 cada vez hasta que se reduzca a 0, y la animación está terminada
<script> var timer = null; box.onClick = function () {cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.DocumentElement.scrolltop; if (otop> 0) {document.body.scrolltop 50; timer = requestAnimationFrame (fn);} else {cancelAnimationFrame (temporizador);}});} </script>2. Agregue el efecto de animación ScrollTO ()
Obtenga el parámetro Y en ScrollTO (X, Y) a través del valor de Scrolltop, reduzca 50 cada vez hasta que se reduzca a 0, y la animación está terminada
<script> var timer = null; box.onClick = function () {cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentelement.scrolltop; if (otop> 0) {scrollto (0, otop-50); timer = = requestAnimationFrame (fn);} else {cancelAnimationFrame (temporizador);}});} </script>3. Agregue el efecto de animación Scrollby ()
Establezca el parámetro Y en Scrollby (x, y) en -50 hasta que el scrolltop sea 0, luego se detiene la reversión
<script> var timer = null; box.onClick = function () {cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentelement.scrolltop; if (oTop> 0) {scrollby (0, --50); timer = timer = timer = timer = timer = timer = timer = timer = timer = timer = timer = timer = timer = timer = timer = timer = timer = timer = timer = timer requestAnimationFrame (fn);} else {cancelAnimationFrame (temporizador);}});} </script>lograr
Dado que los métodos ScrollTop, Scrollby () y ScrollTO () usan si el valor ScrollTop se reduce a 0 como referencia para la detención de animación, y los principios e implementaciones de las tres animaciones son básicamente similares, y el rendimiento también es similar. Finalmente, el efecto de mejora de la animación se logra con el atributo ScrollTop más utilizado
Por supuesto, si cree que la velocidad de 50 no es adecuada, puede ajustarla de acuerdo con la situación real
<syle> .Box {posición: fijo; derecha: 10px; fondo: 10px; altura: 30px; ancho: 50px; text-align: centro; almohadilla: 20px; Color de fondo: LightBlue; Border-Radius: 20%; Overflow: Hidden;}. Box: Hover: Before {Top: 50%}. Box: Hover .Box-In {Visibility: Hidden;}. Box: Before {Position: Absolute; Top: -50%; Izquierda: 50%; Transformar: Translato (-50%,-50%); Contenido: 'Atrás a la parte superior; 40px; color: peru; font-weight: bold;} .box-in {visibilidad: visible; visual id = "box"> <div> </div> </div> </body> <script> var timer = null; box.onClick = function () {cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentelement.scrolltop; if (otop> 0) {document.body.scrolltop = document.documentelement.scrolltop = otop - 50; timer = requestAnimationFrame (fn);} else {cancelAnimationFrame (temporizador);}});} </script>Lo anterior es la descripción completa de los cinco métodos de escritura (desde la implementación hasta la mejora) basado en la implementación de JS para usted, que le presenté. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje. El editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!