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
How to Disable Scrolling Temporarily using JavaScript? Disabling scrolling temporarily using JavaScript means preventing users from scrolling a webpage during specific interactions, such as when a modal is open or a loading screen is displayed. Scrolling can be disabled using JavaScript using 2 methods:Table of ContentUsing window.onscroll functionSetti
2 min read
How to get the Width of Scroll bar using JavaScript? Given an HTML document, the task is to get the width of the scrollbar using JavaScript. Approach:Create an element (div) containing a scrollbar.OffsetWidth defines the width of an element + scrollbar width.ClientWidth defines the width of an element.So scrollbar can be defined as width = offsetWidth
3 min read
How to Set Cursor Position in Content-Editable Element using JavaScript? To set the cursor position in content-editable elements, such as a div tag, you can use the JavaScript Range interface. A range is created using the document.createRange() method.Approach:First, create a Range and set the position using the above syntax.Get user input from the input tag using jQuery
3 min read
How to Zoom an Image on Scroll using JavaScript? Zoom in and out of images is a common feature in web development. One way to achieve this effect is by using JavaScript to zoom in and out of an image when the user scrolls. In this article, we will go through the steps needed to create a zoomable image using JavaScript.Step 1: HTML Markup: The firs
3 min read