Para desplazar automáticamente una página de arriba a abajo, podemos usar el método scrollTop() y height() en jquery.
En este método, pase la altura del documento en el método scrollTop para desplazarse.
Ejemplo-1: desplazamiento sin animación.
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("button").click(function() {
$(document).scrollTop($(document).height());
});
});
</script>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<div>
<!-- click on this button
and see the change -->
<button>Click Here!</button>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
</div>
</center>
</body>
</html>
Producción:
- Antes:
- Después:
Ejemplo-2: Desplazamiento con animación.
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show
the working of this method -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("html, body").animate({
scrollTop: $(
'html, body').get(0).scrollHeight
}, 2000);
});
});
</script>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<div>
<!-- click on this button
and see the change -->
<button>Click Here!</button>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
</div>
</center>
</body>
</html>
Producción:
- Antes:
- Después:
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 Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA