JavaScript Desplácese hasta la parte superior de Div
-
Utilice el método
scrollIntoView()para desplazarse hasta la parte superior de Div en JavaScript -
Utilice el método
scrollTo()para desplazarse hasta la parte superior de Div en JavaScript
En JavaScript, para la vinculación interna y el desplazamiento por la página web, podemos tener varias formas de seguir. Incluso podemos establecer el href de la etiqueta ancla directamente en un id y desplazarnos hasta esa sección.
Pero para una unidad dinámica, cambiaremos a la forma JavaScript de realizar la tarea.
En la siguiente sección, demostraremos los métodos scrollIntoView() y scrollTo(). Ambos métodos tienen una funcionalidad similar, pero scrollIntoView() puede funcionar sin ningún parámetro, y scrollTo() puede necesitar algunos puntos específicos.
Veamos el ejemplo.
Utilice el método scrollIntoView() para desplazarse hasta la parte superior de Div en JavaScript
Técnicamente, el método no requiere nada más que la declaración del método. Primero iniciaremos una instancia para el elemento superior div y luego usaremos la ayuda de scrollIntoView().
En consecuencia, un evento de vinculación llevará específicamente la vista a esa parte superior. Las siguientes líneas de código explican en detalle.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#top{
height:200px;
background:pink;
}
#buff{
height:800px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="buff"></div>
<a href="javascript: scroll()">Jump to top of page</a>
<script>
function scroll(){
var top = document.getElementById("top").scrollIntoView({behavior: 'smooth'}, true);
}
</script>
</body>
</html>
Producción:
-Method-to-Scroll-to-Top.webp)
Utilice el método scrollTo() para desplazarse hasta la parte superior de Div en JavaScript
El método scrollTo() toma parámetros para restablecer las medidas de la ventana gráfica. Por lo general, el estado actual de la ventana gráfica tendrá su posición en el eje x y el eje y.
Posteriormente, para llegar al segmento superior, restableceremos las posiciones actuales, y así estaremos en la parte superior del div.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#top{
height:200px;
background:orange;
}
#buff{
height:800px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="buff"></div>
<a href="javascript: scroll()">Jump to top of page</a>
<script>
function scroll(){
var top = document.getElementById("top")
window.scrollTo(0,0);
}
</script>
</body>
</html>
Producción:
-Method-to-Scroll-to-Top.webp)
