HTML | DOM scrollIntoView() Method
Last Updated :
18 Nov, 2019
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);
}
function myFunction2() {
var e = document.getElementById("content2");
e.scrollIntoView(true);
}
function myFunction3() {
var e = document.getElementById("content3");
e.scrollIntoView();
}
</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");
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...