How to scroll to an element inside a div using javascript?
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 :
Please Login to comment...