Una página desplazable se puede desplazar hacia la parte superior utilizando 2 enfoques:
Método 1: usar window.scrollTo()
El método scrollTo() de la interfaz de ventana se puede usar para desplazarse a una ubicación específica en la página. Acepta 2 parámetros, la coordenada x e y de la página a la que desplazarse. Pasar ambos parámetros como 0 desplazará la página hasta el punto superior e izquierdo.
Sintaxis:
window.scrollTo(x-coordinate, y-coordinate)
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Scroll to the top of the
page using JavaScript/jQuery?
</title>
<style>
.scroll {
height: 1000px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>Scroll to the top of the page
using JavaScript/jQuery?</b>
<p>Click on the button below to
scroll to the top of the page.</p>
<p class="scroll">GeeksforGeeks is a
computer science portal. This is a
large scrollable area.</p>
<button onclick="scrollToTop()">
Click to scroll to top
</button>
<script>
function scrollToTop() {
window.scrollTo(0, 0);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: Usar scrollTo() en jQuery
En jQuery, el método scrollTo() se usa para establecer o devolver la posición de la barra de desplazamiento vertical para un elemento seleccionado . Este comportamiento se puede usar para desplazarse a la parte superior de la página aplicando este método en la propiedad de la ventana. Al establecer el parámetro de posición en 0, la página se desplaza hacia la parte superior.
Sintaxis:
$(window).scrollTop(position);
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Scroll to the top of the
page using JavaScript/jQuery?
</title>
<style>
.scroll {
height: 1000px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
Scroll to the top of the page
using JavaScript/jQuery?
</b>
<p>
Click on the button below to
scroll to the top of the page.
</p>
<p class="scroll">
GeeksforGeeks is a computer
science portal.
This is a large scrollable area.
</p>
<button onclick="scrollToTop()">
Click to scroll to top
</button>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script>
function scrollToTop() {
$(window).scrollTop(0);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
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