Skip to content
Related Articles

Related Articles

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. 

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 : 

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :