如何使用jQuery对scrollTop进行动画处理

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

animate()方法用于在一组CSS属性上执行一个自定义动画。它通过逐步改变属性的值来创造一个动画效果。只有那些有数字值的属性可以被动画化。该动画可以用两个额外的参数进行修改，这些参数可以帮助改变动画的速度。

这个方法与scrollTop属性一起使用，可以使页面的滚动产生动画效果。jQuery选择器被用来选择页面的 “html “和 “body “标签。这样做是为了确保与一些浏览器的兼容性，在这些浏览器中，只选择body元素是不行的。

animate()方法被用在这个被选中的元素上，其样式参数是scrollTop属性。动画的速度和缓和程度可以根据需要改变。

语法:

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

例子1：这个例子以默认的速度制作滚动的动画。

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to animate scrollTop with jQuery?
    </title>
      
    <script src=
        "https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
      
    <style>
        .scrollable {
            background-color: green;
            height: 1000px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        How to animate scrollTop with jQuery?
    </b>
      
    <p>
        Click on the button to scroll
        to the top of the page.
    </p>
      
    <p class="scrollable">
        This is a large div to
        help in scrolling.
    </p>
      
    <button onclick="scrollTopAnimated()">
        Scroll To Top
    </button>
      
    <script type="text/javascript">
        function scrollTopAnimated() {
            $("html, body").animate({ scrollTop: "0" });
        }
    </script>
</body>
  
</html>

输出:
如何使用jQuery对scrollTop进行动画处理？

例子2：这个例子是以3000的速度来制作滚动的动画。

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to animate scrollTop with jQuery?
    </title>
      
    <script src=
        "https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
      
    <style>
        .scrollable {
            background-color: green;
            height: 1000px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        How to animate scrollTop with jQuery?
    </b>
      
    <p>
        Click on the button to scroll to the
        top of the page.
    </p>
      
    <p class="scrollable">
        This is a large div to help in scrolling.
    </p>
      
    <button onclick="scrollTopAnimated()">
        Scroll To Top
    </button>
      
    <script type="text/javascript">
        function scrollTopAnimated() {
            $("html, body").animate(
                { scrollTop: "0" }, 3000);
        }
    </script>
</body>
  
</html>