在前端开发中，经常会遇到需要平滑滚动到某个元素的情况，这时候可以使用 npm 包 scrollto-element 来实现。它可以让网页平滑滚动到指定元素的位置。
安装
npm install scrollto-element --save
使用
在需要使用平滑滚动的页面引入该包：
import scrollToElement from 'scrollto-element'
基本用法
在需要触发平滑滚动的地方，比如一个按钮点击，调用 scrollToElement() 方法即可：
// 获取按钮元素 const button = document.querySelector('.btn') // 滚动到元素 button.addEventListener('click', () => { const targetElement = document.querySelector('.scroll-target') scrollToElement(targetElement) })
上述代码中，我们获取到了一个按钮元素，并为其绑定了一个 click 事件，当点击按钮时，调用 scrollToElement() 方法，将需要平滑滚动到的元素作为参数传入即可。
高级用法
scrollto-element 还提供了一些高级配置，让我们可以更加灵活地使用。以下是三个可选参数：
element: 触发滚动的元素，默认为 window，也就是整个网页；duration: 滚动所需时间，默认为 1000ms；offset: 偏移量，滚动结束时，离目标元素多少个像素，默认为 0。
例如，我们可以为滚动设置一个 duration 参数：
-- -------------------- ---- ------- ------ --------------- ---- ------------------ ----- ------ - ------------------------------ -------------------------------- -- -- - ----- ------------- - ---------------------------------------- ------------------------------ - --------- ---- -- --------- ------ -- --展开代码
总结
通过使用 scrollto-element，我们可以很方便地实现页面的平滑滚动效果。同时，可选的高级配置也让我们能够更加精细地控制整个滚动过程，让用户体验更加流畅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ad581e8991b448d8726
