如何使用 jQuery 为 scrollTop 设置动画？

JavaScript 中的scrollTop属性用于设置或返回任何元素的垂直滚动条位置。将 scrollTop 设置为任何值将使页面滚动到该位置。默认情况下，滚动会立即发生并突然滚动到该值。这种滚动可以使用 jQuery 进行动画处理。

animate() 方法用于在一组 CSS 属性上执行自定义动画。它通过逐步更改属性值来创建动画效果。只有具有数值的属性可以动画化。可以使用 2 个附加参数修改动画，这些参数有助于改变动画的速度。

此方法与 scrollTop 属性一起使用来为页面上的滚动设置动画。 jQuery 选择器用于选择页面的“html”和“body”标签。这样做是为了确保与某些仅选择 body 元素不起作用的浏览器兼容。

animate() 方法用于在样式参数中带有 scrollTop 属性的选定元素。动画的速度和缓动可以根据需要进行更改。

句法：

$("html, body").animate({ scrollTop: scrollPosition });

示例 1：此示例以默认速度为滚动设置动画。

  

    
        How to animate scrollTop with jQuery?
    
      
    
    
      
    
        .scrollable {
            background-color: green;
            height: 1000px;
        }
    

  

    
        GeeksForGeeks
    
      
    
        How to animate scrollTop with jQuery?
    
      
    
        Click on the button to scroll
        to the top of the page.
    
      
    
        This is a large div to
        help in scrolling.
    
      
    
        Scroll To Top
    
      
    
        function scrollTopAnimated() {
            $("html, body").animate({ scrollTop: "0" });
        }
    

  

输出：

示例 2：此示例以 3000 的速度为滚动设置动画。

      

    
        How to animate scrollTop with jQuery?
    
      
    
    
      
    
        .scrollable {
            background-color: green;
            height: 1000px;
        }
    

  

    
        GeeksForGeeks
    
      
    
        How to animate scrollTop with jQuery?
    
      
    
        Click on the button to scroll to the
        top of the page.
    
      
    
        This is a large div to help in scrolling.
    
      
    
        Scroll To Top
    
      
    
        function scrollTopAnimated() {
            $("html, body").animate(
                { scrollTop: "0" }, 3000);
        }
    

  

输出：

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