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

03 Jun, 2020
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 : 
JavaScript-Misc
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
Set the value of an input field in JavaScript
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?