How to Scroll to an Element Inside a Div using JavaScript?
Last Updated :
12 Aug, 2024
To scroll to an element within a div using JavaScript, set the parent div's scrollTop`to the target element's offsetTop. This method allows smooth navigation within a scrollable container.
Below are the methods to scroll to an element inside a Div using JavaScript:
The scrollIntoView() method is used to scroll to the specified element in the browser.
Syntax:
element.scrollIntoView()
Example: In this example, we will see the implementation 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:
OutputThe scroll() method is used to scroll to the specified element in the browser.
Syntax:
element.scroll(x-cord,y-cord)
Example: In this example, we will see the implementation 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) {
let currenttop = 0;
if (obj.offsetParent) {
do {
currenttop += obj.offsetTop;
} while ((obj = obj.offsetParent));
return [currenttop];
}
}
</script>
</body>
</html>
Output:
OutputThe scrollTo() method is used to scroll to the specified element in the browser.
Syntax:
element.scrollTo(x-cord,y-cord)
Example: In this example, we will see the implementation 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) {
let currenttop = 0;
if (obj.offsetParent) {
do {
currenttop += obj.offsetTop;
} while ((obj = obj.offsetParent));
return [currenttop];
}
}
</script>
</body>
</html>
Output:
OutputUsing animate() Method (jQuery)
The animate() method in jQuery can also be used for smooth scrolling animations to an element within a container. Ensure jQuery is included in your project for this approach.
Example: To demonstrate scrolling to an element inside a div using JQuery animate() method.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#condiv {
height: 300px;
width: 500px;
overflow: auto;
background: #f0f0f0;
}
#ele {
margin-top: 600px;
height: 200px;
width: 200px;
background-color: #4caf50;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<p>Click the button to scroll to the element.</p>
<button onclick="scrollToElement()">Scroll</button>
<div id="condiv">
<div id="ele">GeeksforGeeks</div>
</div>
<script>
function scrollToElement() {
$("#condiv").animate(
{
scrollTop: $("#ele").offset().top - $("#condiv").offset().top,
},
1000
);
}
</script>
</body>
</html>
Output:
Output
Similar Reads
How to Get and Set Scroll Position of an Element using JavaScript ? In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of
3 min read
How to identify which element scroll is being used using JavaScript ? To identify which element is being scrolled using JavaScript, you can attach scroll event listeners to specific elements. This allows you to determine which element's scroll event is active, enabling tailored responses or interactions based on the particular element being scrolled.Using Scroll event
3 min read
How to create Infinite Scrolling using onScroll Event in JavaScript? We have seen many shopping sites that list some limited number of products(using a back-end API) when we open the website and scroll down to the bottom, we see that more products are fetched and displayed, and as we scroll even further even more products are loaded and fetched and it keeps happening
3 min read
How to Create Scroll Indicator using HTML CSS and JavaScript ? Scroll Indicator is a progress bar that represents how much a page has been scrolled. When we scroll down the bar fills up and when we scroll up the bar amount reduces. Approach: Now, we will create a basic webpage with text to enable scrolling and then use JavaScript to make the scroll indicator wo
3 min read
How to get the height of scroll bar using JavaScript ? To get the height of scroll bar we could use different approaches. In this article, we are given an HTML document and the task is to get the height of the scrollbar using JavaScript. Following are the different approaches to solving this problem which are discussed below: Table of Content Using Cont
3 min read
How to Scroll to Bottom of Div in JavaScript ? Scrolling to the bottom of a div is a common task in web development, especially when dealing with chat applications, message boards, or any content where new information is frequently added at the bottom. There are several approaches to scrolling to the bottom of the div in JavaScript which are as
4 min read