📜  如何使用 jQuery 为 scrollTop 设置动画?

📅  最后修改于: 2022-05-13 01:56:02.699000             🧑  作者: Mango

如何使用 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?
    
      
    
      
    

  

    

        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.     

                          

输出:
滚动默认

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



      

    
        How to animate scrollTop with jQuery?
    
      
    
      
    

  

    

        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.     

                          

输出:
滚动缓慢

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