如何使用javascript滚动到div内的元素？

有很多方法可以滚动到一个元素。以下是 javascript 中可用于滚动到元素的方法。

scrollIntoView方法： scrollIntoView() 用于滚动到浏览器中的指定元素。

句法：

element.scrollIntoView()

示例：使用 scrollIntoView() 滚动到一个元素。

html

    
        
            #condiv {
                height: 500px;
                width: 500px;
                overflow: auto;
                background: #82c93a;
            }
            #ele {
                top: 70%;
                height: 200px;
                width: 200px;
                background-color: green;
                position: absolute;
            }
        
    
    
          
Click the button to scroll to the element.
  
        Scroll
        
            
                GeeksforGeeks
            
        
        
            function scrolldiv() {
                var elem = document.getElementById("ele");
                elem.scrollIntoView();
            }
        
    

输出 ：

scroll 方法： scroll() 用于滚动到浏览器中的指定元素。

语法：这里，x-cord 指定 x 坐标，y-cord 指定 y 坐标。

element.scroll(x-cord,y-cord)

示例：使用 scroll() 滚动到一个元素。

html

    
        
            #condiv {
                height: 500px;
                width: 500px;
                overflow: auto;
                background: #82c93a;
            }
            #ele {
                top: 70%;
                height: 200px;
                width: 200px;
                background-color: green;
                position: absolute;
            }
        
    
    
          
Click the button to scroll to the element.
  
        Scroll
        
            
                GeeksforGeeks
            
        
        
            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];
                }
            }
        
    

输出 ：

scrollTo 方法： scrollTo ( ) 用于滚动到浏览器中的指定元素。

语法：这里，x-cord 指定 x 坐标，y-cord 指定 y 坐标。

element.scrollTo(x-cord,y-cord)

示例：使用 scrollTo() 滚动到一个元素。

html

    
        
            #condiv {
                height: 500px;
                width: 500px;
                overflow: auto;
                background: #82c93a;
            }
            #ele {
                top: 70%;
                height: 200px;
                width: 200px;
                background-color: green;
                position: absolute;
            }
        
    
    
          
Click the button to scroll to the element.
  
        Scroll
        
            
                GeeksforGeeks
            
        
        
            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];
                }
            }
        
    

输出 ：