La propiedad scrollTop en JavaScript se usa para establecer o devolver la posición de la barra de desplazamiento vertical de cualquier elemento. Establecer scrollTop en cualquier valor hará que la página se desplace a esa ubicación. El desplazamiento por defecto se realiza inmediatamente y se desplaza bruscamente al valor. Este desplazamiento se puede animar usando jQuery.
El método animate() se usa para realizar una animación personalizada en un conjunto de propiedades CSS. Funciona cambiando el valor de la propiedad en pasos graduales para crear un efecto animado. Solo se pueden animar las propiedades que tienen valores numéricos. La animación se puede modificar con 2 parámetros adicionales que pueden ayudar a cambiar la velocidad de la animación.
Este método se usa con la propiedad scrollTop para animar el desplazamiento en la página. El selector de jQuery se utiliza para seleccionar las etiquetas «html» y «cuerpo» de la página. Esto se hace para garantizar la compatibilidad con algunos navegadores en los que seleccionar solo el elemento del cuerpo no funciona.
El método animate() se usa en este elemento seleccionado con la propiedad scrollTop en el argumento de estilos. La velocidad y la aceleración de la animación se pueden cambiar según sea necesario.
Sintaxis:
$("html, body").animate({ scrollTop: scrollPosition });
Ejemplo 1: este ejemplo anima el desplazamiento con la velocidad predeterminada.
<!DOCTYPE html>
<html>
<head>
<title>
How to animate scrollTop with jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<style>
.scrollable {
background-color: green;
height: 1000px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
How to animate scrollTop with jQuery?
</b>
<p>
Click on the button to scroll
to the top of the page.
</p>
<p class="scrollable">
This is a large div to
help in scrolling.
</p>
<button onclick="scrollTopAnimated()">
Scroll To Top
</button>
<script type="text/javascript">
function scrollTopAnimated() {
$("html, body").animate({ scrollTop: "0" });
}
</script>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo animando el scroll con una velocidad de 3000.
<!DOCTYPE html>
<html>
<head>
<title>
How to animate scrollTop with jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<style>
.scrollable {
background-color: green;
height: 1000px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
How to animate scrollTop with jQuery?
</b>
<p>
Click on the button to scroll to the
top of the page.
</p>
<p class="scrollable">
This is a large div to help in scrolling.
</p>
<button onclick="scrollTopAnimated()">
Scroll To Top
</button>
<script type="text/javascript">
function scrollTopAnimated() {
$("html, body").animate(
{ scrollTop: "0" }, 3000);
}
</script>
</body>
</html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA