Muchas páginas web colocarán un botón "Volver a la parte superior" a continuación, especialmente las páginas web que no tienen navegación en la parte inferior de la página, lo que puede ayudar a los visitantes a encontrar la navegación nuevamente o volver a visitar el anuncio (es tan hermoso). Como JavaScript se está volviendo cada vez más ampliamente utilizado en los últimos años, el efecto deslizante está en todas partes, por lo que seguí la tendencia e hice el regreso a la función superior para crear un efecto deslizante. Más tarde, para ajustar mejor las características físicas, se transformó el efecto deslizante de la desaceleración.
Hablemos primero sobre el principio. Obtendremos la distancia desde la barra de desplazamiento hasta la parte superior de la página y luego la moveremos hacia arriba por cierta distancia; Luego obtenga la distancia desde la barra de desplazamiento hasta la parte superior de la página y muévala hacia arriba a cierta distancia (ligeramente más pequeña que la última vez); etcétera...
<script type = "text/javaScript">/*** Volver a la parte superior de la página* @param Acceleración Aceleración* @param intervalo de tiempo (ms) **/function gotop (aceleración, tiempo) {aceleración = aceleración || 0.1; Tiempo = Tiempo || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentelement) {x1 = document.documentelement.scrollleft || 0; y1 = document.documentelement.scrolltop || 0; } if (document.body) {x2 = document.body.scrollleft || 0; y2 = document.body.scrolltop || 0; } var x3 = window.scrollx || 0; var y3 = window.scrolly || 0; // distancia horizontal desde la barra de desplazamiento a la parte superior de la página var x = math.max (x1, math.max (x2, x3)); // distancia vertical desde la barra de desplazamiento a la parte superior de la página var y = math.max (y1, math.max (y2, y3)); // Distancia de desplazamiento = distancia/velocidad de corriente, porque la distancia es más pequeña y la velocidad es mayor que 1, la distancia de desplazamiento se volverá más pequeña y más pequeña velocidad de VAR = 1 + aceleración; Window.scrollto (Math.floor (x / velocidad), math.floor (y / velocidad)); // Si la distancia no es cero, continúe llamando a la función de iteración si (x> 0 || y> 0) {var invokeFunction = "gotop (" + aceleración + "," + tiempo + ")"; Window.setTimeOut (InvokeFunction, Time); }} </script>document.documentelement.scrolltop, document.body.scrolltop, window.scrolly es en realidad los mismos, pero solo funcionan en algunos navegadores. En cuanto a qué navegadores funcionan, puede depurarlo usted mismo.
¿Cómo usarlo?
La copia del código es la siguiente:
<a href = "#" onClick = "gotop (); return false;"> top </a>