在前端开发中，经常会遇到滚动页面的需求，但是浏览器的默认滚动效果有时候并不满足我们的需求。因此，我们需要一种可以自定义滚动行为的方案，这时候，采用 npm 包 scroll-smooth 是一个不错的选择。
scroll-smooth 是一个依赖于 jQuery 的 npm 包，它可以让我们平滑地滚动到指定位置，并且支持自定义滚动行为。在本篇文章中，我将详细介绍该 npm 包的使用方法，并提供示例代码方便读者学习。
安装
首先，在使用 scroll-smooth 之前，我们需要先安装该 npm 包。在终端中执行以下命令：
npm install scroll-smooth
该命令会将 scroll-smooth 安装到当前项目中，并在 package.json 文件中添加其依赖。
使用
安装完成之后，我们需要在 HTML 文件中引入 jQuery 和 scroll-smooth。通常情况下，我们会把这两个文件放到 head 标签中，例如：
-- -------------------- ---- -------
------
------
------- -------------------------------------
------- ---------------------------------------------------
-------
------
---- ---- ---
-------
-------这里我们假设使用的是 jQuery 的 minified 版本和 scroll-smooth 的 minified 版本。
引入完成之后，就可以开始使用 scroll-smooth 了。scroll-smooth 提供了一个名为 smoothScroll 的方法，用于平滑地滚动到指定位置。该方法的参数是一个对象，其中包含两个属性：
duration：可选，表示滚动持续的时间，单位为毫秒，默认为 400 毫秒；offset：可选，表示滚动到指定位置时，距离该位置的偏移量，单位为像素，默认为 0。
示例代码如下：
$().smoothScroll({
duration: 1000,
offset: -100
});这段代码会使页面平滑地滚动到距离目标位置 100 个像素的位置，持续时间为 1000 毫秒。
自定义滚动行为
如果默认滚动行为不能满足我们的需求，我们可以使用 scroll-smooth 提供的回调函数来自定义滚动行为。scroll-smooth 通过 beforeScroll 和 afterScroll 两个回调函数来支持用户自定义滚动行为。
beforeScroll 在滚动开始之前被调用，可以在该回调函数中进行一些前置操作，例如隐藏或显示某些元素。该回调函数接收两个参数：
scrollTop：表示当前视口的滚动距离；offset：表示真实目标位置距离视口顶部的偏移量。
示例代码如下：
$().smoothScroll({
beforeScroll: function(scrollTop, offset) {
$('#header').hide();
}
});这段代码会在滚动开始前隐藏 ID 为 header 的元素。
afterScroll 在滚动结束之后被调用，可以在该回调函数中进行一些后置操作，例如显示动画效果。该回调函数接收一个参数：
anchor：表示滚动目标元素的位置。
示例代码如下：
$().smoothScroll({
afterScroll: function(anchor) {
$(anchor).animate({ opacity: 1 }, 500);
}
});这段代码会在滚动结束后给滚动目标元素添加一个透明度动画效果。
结尾
到此，我们已经学习了如何使用 scroll-smooth 实现平滑滚动，并且掌握了自定义滚动行为的方法。希望本篇文章能够对你的前端开发工作有所帮助。完整的示例代码可以上述基础上自行构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc681e8991b448e649d