The Window scroll() method scrolls the window to a particular place in the document. This method is different form scrollTo() method as it takes different parameters like scrolling behavior, etc using ScrolltoOptions Dictionary.
Syntax:
window.scroll(x-coord, y-coord)
Or
window.scroll(options)
Parameters:
- x-coord: pixels along the horizontal axis of the document that you want to be scrolled to.
- y-coord: pixels along the vertical axis of the document that you want to be scrolled to.
- options: A ScrolltoOptions Dictionary.
Example 1: In this example, we will scroll using 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>
|
Output:
Example 2: In this example, we will scroll using coords.
<!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>
|
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera