jQuery scrollTop 平滑滚动动画 - JavaScript

当我们需要在网页中通过链接或按钮控制页面滚动到特定位置时，一般可以通过使用 jQuery 的 scrollTop 方法来实现。不过如果直接使用 scrollTop 方法，页面滚动会是突兀的直接跳转，影响用户体验。为了使页面滚动更加平滑，我们可以通过 jQuery 的动画函数 animate 来实现平滑的滚动动画。

实现方式

实现方式如下：

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

其中，targetOffset 是我们需要滚动的目标位置的偏移量，单位为像素。1000 是滚动动画的持续时间，单位为毫秒。在这个例子中，动画会让页面平滑滚动到这个目标位置。

示例代码

<!-- HTML 代码 -->
<a href="#target">跳转到目标位置</a>

<div style="height: 1000px;"></div>

<div id="target">目标位置</div>

<!-- JavaScript 代码 -->
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
  $('a[href^="#"]').on("click", function (event) {
    event.preventDefault();
    var target = $(this.hash);
    if (target.length) {
      var targetOffset = target.offset().top;
      $("html, body").animate({ scrollTop: targetOffset }, 1000);
    }
  });
</script>

在这个示例代码中，我们通过一个锚点链接来触发滚动动画，在点击链接之后，页面会平滑地滚动到 id 为 target 的元素处。

总结

通过 scrollTop 方法和 animate 函数的结合，我们可以实现平滑的页面滚动动画效果，极大地提升了用户体验。