El método Window scroll() desplaza la ventana a un lugar particular en el documento. Este método es diferente del método scrollTo() ya que toma diferentes parámetros como el comportamiento de desplazamiento, etc. usando ScrolltoOptions Dictionary.
Sintaxis:
window.scroll(x-coord, y-coord)
O
window.scroll(options)
Parámetros:
- x-coord: píxeles a lo largo del eje horizontal del documento al que desea desplazarse.
- y-coord: píxeles a lo largo del eje vertical del documento al que desea desplazarse.
- opciones: un diccionario ScrolltoOptions.
Ejemplo 1: En este ejemplo, nos desplazaremos usando ScrolltoOptions Dictionary.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>window scroll() method</title>
</head>
<body style="text-align:center;">
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeks
forGeeksGeeksforGeeksGeeksforGeeksGeeksforGeeks
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeksfor
GeeksGeeksforGeeksGeeksforGeeksGeeksforGeeksGeeks
forGeeksGeeksforGeeksGeeksforGeeksGeeksforGeeks
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeksfor
GeeksGeeksforGeeks
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="a">
HTML | window scroll() method
</p>
<button onclick = "Geeks()">
Click Here to Scroll
</button>
<script>
var a = document.getElementById("a");
function Geeks(){
window.scroll({
top: 100,
left: 100,
behavior: 'smooth'
});
}
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, nos desplazaremos usando coordenadas.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>window scroll() method</title>
</head>
<body style="text-align:center;">
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeks
forGeeksGeeksforGeeksGeeksforGeeksGeeksforGeeks
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeksfor
GeeksGeeksforGeeksGeeksforGeeksGeeksforGeeksGeeks
forGeeksGeeksforGeeksGeeksforGeeksGeeksforGeeks
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeksfor
GeeksGeeksforGeeks
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="a">
HTML | window scroll() method
</p>
<button onclick = "Geeks()">
Click Here
</button>
<script>
var a = document.getElementById("a");
function Geeks(){
window.scroll(500, 0);
}
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- Borde
- Firefox
- Safari
- Ópera