如何使用 jQuery 设置平滑滚动以停止在顶部的特定位置？

jQuery 中的scrollTop()方法用于滚动到页面的特定部分。使用可用的内置动画为该方法设置动画可以使滚动更流畅。并且，从中减去指定的值将使滚动从顶部停止。

方法：首先使用 hash 属性提取锚链接的哈希部分，并使用offset()方法找到它在页面上的位置。然后对该哈希值调用 scrollTop()方法以滚动到该位置。此方法通过将其包含在animate()方法中并指定要使用的动画持续时间(以毫秒为单位)来进行动画处理。较大的值会使动画比较小的值更慢。这将在单击页面上的所有锚链接时平滑地设置动画。然后我们将减去指定的值停止平滑滚动从顶部停止。

例子：

HTML

  

    
        How to set smooth scrolling to stop at
        a specific position from the top using
        jQuery?
    
  
    
    
    
  
    
    
        .scroll {
            height: 1000px;
            background-color: teal;
            color: white;
        }
    

  

    
        GeeksforGeeks
    
  
    
        How to set smooth scrolling to stop at
        a specific position from the top using
        jQuery?
    
  
    
        Click on the button below to
        scroll to the top of the page.
    
  
    
        GeeksforGeeks is a computer science
        portal. This is a large scrollable
        area.
    
  
    
        Scroll to top
    
  
    
    
  
        // Define selector for selecting 
        // anchor links with the hash 
        let anchorSelector = 'a[href^="#"]';
  
        $(anchorSelector).on('click', function (e) {
  
            // Prevent scrolling if the 
            // hash value is blank 
            e.preventDefault();
  
            // Get the destination to scroll to 
            // using the hash property 
            let destination = $(this.hash);
  
            // Get the postion of the destination 
            // using the coordinates returned by 
            // offset() method and subtracting 50px
            // from it.
            let scrollPosition
                = destination.offset().top - 50;
  
            // Specify animation duration 
            let animationDuration = 500;
  
            // Animate the html/body with 
            // the scrollTop() method 
            $('html, body').animate({
                scrollTop: scrollPosition
            }, animationDuration);
        }); 
    

  

输出：