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

很多时候，在我们的网站中，当我们点击导航栏或列表中的按钮或标题时，我们希望自动滚动到网页的某个部分。因此，要实现这种自动滚动到所需元素的功能，我们需要借助jQuery 。使用 jQuery，我们可以以非常简单的方式实现这一点。但首先我们需要了解 jQuery 中的两个方法，即 scrollTop()和offSet()。

scrollTop() 方法：它有助于获取所有匹配元素集合中第一个元素的滚动条的当前垂直位置。

scrollTop() 方法：用于将滚动条的垂直位置设置为值 ‘val’。

offSet() 方法：用于获取所有匹配元素集合中第一个元素的坐标。

示例 1：此示例描述如何使用 jQuery 滚动特定元素。

  

    
    
  
    
    
      
    
        How to scroll to specific 
        item using jQuery?
    
      
    
        div {
            color: #0f9d58;
            border: 3px solid #0f9d58;
            width: 200px;
            height: 100px;
            overflow: auto;
        }
  
        p {
            width: 300px;
            height: 300px;
        }
    

  

    
        Heading
        paragraph
    
  
    
        var container = $('div');
        var scrollTo = $('p');
  
        // Calculating new position of scrollbar
        var position = scrollTo.offset().top 
                - container.offset().top 
                + container.scrollTop();
  
        // Setting the value of scrollbar
        container.scrollTop(position);
    

  

输出：

示例 2：在此示例中，我们将看到如何通过单击不同的按钮以及滚动效果来滚动到页面的不同部分。

  

    
    
  
    
    
      
    
        How to scroll to specific 
        item using jQuery?
    
  
    
        div {
            color: #0f9d58;
            border: 3px solid #0f9d58;
            margin: 10px;
            width: 200px;
            height: 100px;
            overflow: auto;
        }
  
        p {
            width: 300px;
            height: 300px;
        }
  
        button {
            margin: 10px;
        }
    

  

    
        Heading
        paragraph 1
        paragraph 2
    
  
    
        paragraph 1
    
  
    
        paragraph 2
    
  
    
        var container = $('div');
  
        // Scrolls to paragraph 1
        function scrollParagraph1() {
            var scrollTo = $("#p1");
  
            // Calculating new position
            // of scrollbar
            var position = scrollTo.offset().top 
                - container.offset().top 
                + container.scrollTop();
  
            // Animating scrolling effect
            container.animate({
                scrollTop: position
            });
        }
  
        // Scrolls to paragraph 2
        function scrollParagraph2() {
            var scrollTo = $("#p2");
  
            // Calculating new position 
            // of scrollbar
            var position = scrollTo.offset().top 
                - container.offset().top 
                + container.scrollTop();
  
            // Animating scrolling effect
            container.animate({
                scrollTop: position
            });
        }
    

  

输出：

当第二个按钮被点击时，输出如下。