使用 JavaScript 单击链接后如何设置平滑滚动？

单击锚链接后，有两种方法可以平滑滚动网页，如下所述：

方法 1：使用具有“平滑”行为的 scrollIntoView()： scrollIntoView() 方法用于将用户的视图滚动到调用它的元素。它包含几个可以定义为修改滚动行为的选项。其中之一是“行为”属性。此属性的默认值使滚动立即跳转到其目的地，而不是平滑滚动。将此值设置为 'smooth' 会更改此行为并使页面平滑滚动。

锚链接的哈希部分首先使用 hash 属性提取，并使用 querySelector() 方法进行选择。然后在此选定元素上调用 scrollIntoView() 方法以将页面平滑滚动到此位置。

例子：

HTML

 

    
        How to set smooth scrolling after
        clicking an anchor link using
        JavaScript?
    
 
    
        .scroll {
            height: 1000px;
            background-color: lightgreen;
        }
    

 

    
        GeeksforGeeks
    
     
    
        How to set smooth scrolling after
        clicking an anchor link using
        JavaScript?
    
     
    
        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^="#"]';
     
        // Collect all such anchor links
        let anchorList =
            document.querySelectorAll(anchorSelector);
         
        // Iterate through each of the links
        anchorList.forEach(link => {
            link.onclick = function (e) {
     
                // Prevent scrolling if the
                // hash value is blank
                e.preventDefault();
         
                // Get the destination to scroll to
                // using the hash property
                let destination =
                    document.querySelector(this.hash);
         
                // Scroll to the destination using
                // scrollIntoView method
                destination.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    

 

输出：

方法2：使用jQuery scrollTop() 方法：jQuery中的scrollTop( ) 方法用于滚动到页面的特定部分。使用可用的内置动画对此方法进行动画处理可以使滚动更平滑。

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

例子：

HTML

 

    
        How to set smooth scrolling after
        clicking an anchor link using
        JavaScript?
    
     
    
    
     
    
        .scroll {
            height: 1000px;
            background-color: lightgreen;
        }
    

 

    
        GeeksforGeeks
    
 
    
        How to set smooth scrolling after
        clicking an anchor link using
        JavaScript?
    
     
    
        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
            let scrollPosition
                = destination.offset().top;
     
            // Specify animation duration
            let animationDuration = 500;
     
            // Animate the html/body with
            // the scrollTop() method
            $('html, body').animate({
                scrollTop: scrollPosition
            }, animationDuration);
        });
    

 

输出：