How to use scrollTo( ) method In Javascript

The scrollTo() 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">
            w3wiki
        </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:

Output

How to scroll to an element inside a div using javascript?

To scroll to an element inside a div using JavaScript, you can use the `scrollTop` property of the parent div, setting it to the target element’s `offsetTop`. This adjustment allows you to smoothly navigate to a specific element within a scrollable container without using a full-page scroll. There are lots of methods to scroll to an element. The following are the methods available in JavaScript to scroll to an element.

How to use scrollTo( ) method In Javascript

Syntax:

html

How to scroll to an element inside a div using javascript?

Similar Reads

Contact Us