The scrollIntoView() method scrolls the specified element into the visible area of the browser window.
Syntax:
document.getElementById("id").scrollIntoView(alignTo);Parameters:
-
alignTo: It is a Boolean type parameter containing true or false value. The default value is set to true.
- true: Scroll the element to the top of its window.
- false: Scroll the element to the bottom of its window.
Note that the underlying terminology is not ‘top’ or ‘bottom’, I’ll get into that in the next section.
So, it’s just like hovering through elements in the respective window with a button assigned with specific coordinates of the window or an element.
Example:
<!DOCTYPE html> <html> <head> <style>
#element {
height: 200px;
width: 350px;
overflow: auto;
background: green;
}
#content1 {
margin: 500px;
height: 100px;
width: 1000px;
background-color: white;
}
#content2 {
margin: 500px;
height: 50px;
width: 1000px;
background-color: grey;
}
#content3 {
margin: 500px;
height: 150px;
width: 1000px;
background-color: coral;
}
</style>
<script>
function myFunction1() {
var e = document.getElementById("content1");
e.scrollIntoView(false); // Makes the element
}
function myFunction2() {
var e = document.getElementById("content2");
e.scrollIntoView(true);
}
function myFunction3() {
var e = document.getElementById("content3");
e.scrollIntoView(); // Default is true
}
</script>
</head> <body> <center>
<h1 style="color: green">GeeksforGeeks</h1>
<button onclick="myFunction1()">Scroll to element-1</button>
<br>
<button onclick="myFunction2()">Scroll to element-2</button>
<br>
<button onclick="myFunction3()">Scroll to element-3</button>
<br>
<br>
<div id="element">
<h2 style="color: white">
Click on the scroll button to see
that elements in a click.</h2>
<div id="content1">
<h2 align="left">Element-1</h2>
</div>
<div id="content2">
<h2 align="left">Element-2</h2>
</div>
<div id="content3">
<h2 align="left">Element-3</h2>
</div>
</div>
</center>
</body> </html> |
Output:
So, in the above, the shift between the items is not being done smooth, it’s just jumping between elements.
To make it look cool, object arguments comes in handy for this use.
Syntax:
document.getElementById("id").scrollIntoView({
behavior: smooth | auto;
block: start | center | end | nearest;
inline: start | center | end | nearest;
});
The behavior object determines the smoothness of the scroll has two modes ‘smooth’ and ‘auto’.
The block object determines at which part of the block the element view should get started.
The inline object determines at which alignment of the element should the view start.
Example:
<!DOCTYPE html> <html> <head> <style>
#element {
height: 200px;
width: 350px;
overflow: auto;
background: green;
}
#content1 {
margin: 500px;
height: 100px;
width: 1000px;
background-color: white;
}
#content2 {
margin: 500px;
height: 50px;
width: 1000px;
background-color: grey;
}
</style>
<script>
function myFunction1() {
var e = document.getElementById("content1");
e.scrollIntoView({
block: 'start',
behavior: 'smooth',
inline: 'start'
});
}
function myFunction2() {
var e = document.getElementById("content2");
// Ends the block to the window
// Bottom and aligns the view to the center
e.scrollIntoView({
block: 'end',
behavior: 'smooth',
inline: 'center'
});
}
</script>
</head> <body> <center>
<h1 style="color: green">GeeksforGeeks</h1>
<button onclick="myFunction1()">
Scroll to element-1
</button>
<br>
<button onclick="myFunction2()">
Scroll to element-2
</button>
<br>
<br>
<br>
<div id="element">
<h2 style="color: white">
Click on the scroll button to
see that elements in a click.
</h2>
<div id="content1">
<h2 align="left">Element-1 aligned to start</h2>
</div>
<div id="content2">
<h2>Element-2 aligned to center</h2>
</div>
</div>
</center>
</body> </html> |
Output: