平滑滚动 jQuery - JavaScript

在Web开发中，经常会遇到需要平滑滚动到页面内的某个位置的需求。这时我们可以使用 jQuery 或纯 JavaScript 来实现这个效果。

使用 jQuery 实现平滑滚动：

可以使用 animate() 方法来实现平滑滚动到指定位置。

$("button").click(function() {
  $('html, body').animate({
    scrollTop: $("#my-element").offset().top
  }, 2000);
});

其中，scrollTop 的值为要滚动到的元素顶部与文档顶部之间的距离。offset() 方法返回元素相对于文档的偏移位置。animate() 方法中的 2000 表示动画效果的持续时间，单位为毫秒。

使用 JavaScript 实现平滑滚动：

可以使用原生的 scrollIntoView() 方法来实现平滑滚动。

let element = document.getElementById("my-element");

element.scrollIntoView({
  behavior: 'smooth'
});

其中，behavior 参数的值为 'smooth' 表示平滑滚动的动画效果。

使用原生 JavaScript 实现平滑滚动的优点是不需要加载 jQuery 库，但需要考虑兼容性问题。

以上就是平滑滚动 jQuery 和 JavaScript 的实现方式，希望对你有所帮助！