There are lots of methods to scroll to an element. The following are the methods available in javascript to scroll to an element.
The scrollIntoView method: The scrollIntoView() is used to scroll to the specified element in the browser.
Syntax:
element.scrollIntoView()
Example: Using scrollIntoView() to scroll to an element.
html
<!DOCTYPE html>
<html>
<head>
<style>
#condiv {
height: 500px;
width: 500px;
overflow: auto;
background: #82c93a;
}
#ele {
top: 70%;
height: 200px;
width: 200px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<p>Click the button to scroll to the element.</p>
<button onclick="scrolldiv()">Scroll</button>
<div id="condiv">
<div id="ele">
GeeksforGeeks
</div>
</div>
<script>
function scrolldiv() {
var elem = document.getElementById("ele");
elem.scrollIntoView();
}
</script>
</body>
</html>
|
Output :
The scroll method: The scroll() is used to scroll to the specified element in the browser.
Syntax: Here, x-cord specifies the x-coordinate and y-cord specifies the y-coordinate.
element.scroll(x-cord,y-cord)
Example: Using scroll() to scroll to an element.
html
<!DOCTYPE html>
<html>
<head>
<style>
#condiv {
height: 500px;
width: 500px;
overflow: auto;
background: #82c93a;
}
#ele {
top: 70%;
height: 200px;
width: 200px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<p>Click the button to scroll to the element.</p>
<button onclick="scrolldiv()">Scroll</button>
<div id="condiv">
<div id="ele">
GeeksforGeeks
</div>
</div>
<script>
function scrolldiv() {
window.scroll(0,
findPosition(document.getElementById("ele")));
}
function findPosition(obj) {
var currenttop = 0;
if (obj.offsetParent) {
do {
currenttop += obj.offsetTop;
} while ((obj = obj.offsetParent));
return [currenttop];
}
}
</script>
</body>
</html>
|
Output :
The scrollTo method: The scrollTo() is used to scroll to the specified element in the browser.
Syntax: Here, x-cord specifies the x-coordinate and y-cord specifies the y-coordinate.
element.scrollTo(x-cord,y-cord)
Example: Using scrollTo() to scroll to an element.
html
<!DOCTYPE html>
<html>
<head>
<style>
#condiv {
height: 500px;
width: 500px;
overflow: auto;
background: #82c93a;
}
#ele {
top: 70%;
height: 200px;
width: 200px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<p>Click the button to scroll to the element.</p>
<button onclick="scrolldiv()">Scroll</button>
<div id="condiv">
<div id="ele">
GeeksforGeeks
</div>
</div>
<script>
function scrolldiv() {
window.scrollTo(0,
findPosition(document.getElementById("ele")));
}
function findPosition(obj) {
var currenttop = 0;
if (obj.offsetParent) {
do {
currenttop += obj.offsetTop;
} while ((obj = obj.offsetParent));
return [currenttop];
}
}
</script>
</body>
</html>
|
Output :