Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 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. 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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 : 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!