如何使用 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 position 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);
        });
    

 

输出：