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:

Table of Content

Using scrollIntoView( ) method
Using scroll( ) method
Using scrollTo( ) method
Using animate() Method (jQuery)

Using scrollIntoView( ) method

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:

Output

Using scroll( ) method

The 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:

Output

Using scrollTo( ) method

The 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:

Output

Using `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

How to get the outer html of an element using jQuery ?

chaitanyashah707

Improve

Article Tags :

How to Scroll to an Element Inside a Div using JavaScript?

Using scrollIntoView( ) method

Syntax:

Using scroll( ) method

Syntax:

Using scrollTo( ) method

Syntax:

Using animate() Method (jQuery)

Similar Reads

Thank You!

What kind of Experience do you want to share?

Using `animate()` Method (jQuery)