Desplazamiento animado en jQuery
-
Use el método
animate()para desplazarse en jQuery -
Use el método
animate()con límite de tiempo para desplazarse por la página en jQuery
jQuery es ampliamente promocionado por su sintaxis sencilla para lograr ideas complejas, mientras que JavaScript ES6 es un competidor duro en la actualidad.
Cuando nos enfocamos en desplazar un div o una página web a cierta altura, notamos varias soluciones. Sin embargo, el método jQuery animate() acepta explícitamente la instancia del cuerpo y html y se desplaza como preferencia.
Realizaremos un desplazamiento vertical básico en nuestros conjuntos de ejemplo a través del método animate() de jQuery. En el último ejemplo, examinaremos una instancia con un marco de tiempo acotado.
Use el método animate() para desplazarse en jQuery
En este sentido, aceptaremos la instancia de los elementos body y html. Por lo tanto, la convención es que varios navegadores puedan ejecutar la función independientemente de sus limitaciones.
A continuación, iniciaremos el método animate() junto con la instancia y estableceremos la especificación scrollTop: "0". También podemos establecer el scrollTop en cualquier valor de preferencia.
En este caso, la página no se enrutará a la parte superior; más bien, subirá a la distancia entre la altura total de la página y el valor scrollTop.
Fragmento de código:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<h4>TOP</h4>
<h4>TOP-20</h4>
<div id="pos" style="height: 600px;background:pink"></div><br>
<button onclick="press()">Go to Top</button>
<script>
function press(){
$("html, body").animate({scrollTop: "20"});
}
</script>
Producción:
Use el método animate() con límite de tiempo para desplazarse por la página en jQuery
Este ejemplo incluye una función similar a la anterior. Pero la adición aquí es que podemos establecer el tiempo de desplazamiento sin definir la función setInterval.
Todo lo que haremos será agregar el tiempo preferible junto con la propiedad scrollTop. Esto facilitará o asegurará el valor de la velocidad de desplazamiento de la página.
Fragmento de código:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<h4>TOP</h4>
<div id="pos" style="height: 600px;background:powderblue"></div><br>
<button onclick="press()">Go to Top</button>
<script>
function press(){
$("html, body").animate({scrollTop: "0"}, 3000);
}
</script>
Producción:
