如何使用 JQuery 自动滚动到特定元素？

任务是自动滚动到特定元素。以下是方法：

方法一：

• 通过 .position().top 属性获取元素的高度。
• 使用.scrollTop() 方法将滚动条的垂直位置设置为等于特定元素的计算高度。

示例 1：此示例使用上述方法。

  

    
        How to scroll automatically to a particular element.
    
    
        #GFG_DOWN {
            margin-top: 370px;
        }
    
    
    

  

      
            GeeksForGeeks  
        
    
    
    
        Click Here
    
    
        This is element.
    
    
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = 
"Click on the button to scroll to the particular element.";
  
        function gfg_Run() {
            $(window).scrollTop($('#GFG_DOWN').position().top);
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：

• 通过 .offset().top 属性获取元素的高度。
• 使用.animate() 方法为元素设置动画。

示例 2：此示例使用上述方法。

  

    
        How to scroll automatically to a particular element.
    
    
        #GFG_DOWN {
            margin-top: 400px;
        }
    
    
    

  

      
            GeeksForGeeks  
        
    
    
    
        Click Here
    
    
        This is element.
    
    
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = 
"Click on the button to scroll to the particular element.";
  
        function gfg_Run() {
            $('html, body').animate({
                scrollTop: $("#GFG_DOWN").offset().top
            }, 500);
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。