Desplácese a ID en JavaScript
-
Use el método
scrollIntoView()para desplazarse a ID en JavaScript -
Use el método
scrollTo()con cálculo de vista manual para desplazarse a ID en JavaScript -
Use el método
scrollTo()conscrollLeftyscrollToppara desplazarse a ID en JavaScript
En el caso general, cuando establecemos una etiqueta de anclaje en nuestro cuerpo HTML y establecemos el href en una identificación específica, podemos desplazarnos a ese elemento. Pero esta práctica no es mayormente bienvenida para casos dinámicos.
Cuando se desplaza a una identificación de la misma página web, lo llamamos enlace interno. Veremos formas de realizar enlaces internos a través de métodos de JavaScript en los siguientes ejemplos.
El método scrollIntoView() es la forma más confiable de desplazarse a una identificación en particular. Pero el caso más importante es obtener el querySelector correcto.
Solo entonces será posible enrutar a ese elemento. Luego también usaremos el método scrollTo() para configurar los comentarios de compensación.
Revisemos estos métodos para una mejor comprensión.
Use el método scrollIntoView() para desplazarse a ID en JavaScript
Para desplazarnos a una identificación particular en JavaScript, podemos emplear el método scrollIntoView().
Desplazarse hacia arriba
Para desplazarnos a los elementos del segmento superior desde el enlace de acción, estableceremos el parámetro de scrollIntoView() en true. Después de hacer clic en el enlace, esto asegura que la página se estresará y alcanzaremos el objetivo anterior.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#blue{
height: 200px;
background: blue;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="blue"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to BLUE</a>
<script>
function scroll(){
var getMeTo = document.getElementById("blue");
getMeTo.scrollIntoView({behavior: 'smooth'}, true);
}
</script>
</body>
</html>
Producción:
Desplazarse hacia abajo
Del mismo modo, aquí estableceremos el parámetro adicional en false, y así se crea la diferencia.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#blue{
height: 200px;
background: blue;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<a href="javascript: scroll();">Get to BLUE</a>
<div id="buff"></div>
<div id="blue"></div>
<script>
function scroll(){
var getMeTo = document.getElementById("blue");
getMeTo.scrollIntoView({behavior: 'smooth'}, false);
}
</script>
</body>
</html>
Producción:
Use el método scrollTo() con cálculo de vista manual para desplazarse a ID en JavaScript
En este caso, seleccionaremos inicialmente nuestro elemento y luego también estableceremos el valor de desplazamiento. Para el siguiente paso, tomaremos la posición de la parte superior del cuerpo y, de manera similar, aseguraremos la posición superior de nuestros elementos a través del método .getBoundingClientRect().
A continuación, realizaremos una operación matemática general para obtener las medidas deseadas para el pergamino. La cerca de código demostrará esto de manera más intuitiva.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#purple{
height: 200px;
background: purple;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="purple"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to Purple</a>
<script>
function scroll(){
const element = document.getElementById('purple');
const offset = 50;
const bodyRect = document.body.getBoundingClientRect().top;
const elementRect = element.getBoundingClientRect().top;
const elementPosition = elementRect - bodyRect;
const offsetPosition = elementPosition - offset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
</script>
</body>
</html>
Producción:
-method-with-manual-calculation-of-the-view.webp)
Use el método scrollTo() con scrollLeft y scrollTop para desplazarse a ID en JavaScript
Este ejemplo implica establecer los atributos para el método scrollTo(). La sintaxis es fácil de entender.
Tomaremos la instancia de nuestro elemento y estableceremos la posición superior e izquierda del desplazamiento a través de element.scrollTop y element.scrollLeft. Saltemos a la base de código.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#yellow{
height: 200px;
background: yellow;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="yellow"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to yellow</a>
<script>
function scroll(){
var getMeTo = document.getElementById("yellow");
window.scrollTo({
top: getMeTo.scrollTop,
left: getMeTo.scrollLeft});
}
</script>
</body>
</html>
Producción:
-method-with-scrollleft-and-scrolltop.webp)
