在我们的前端开发工作中，经常需要使用滚动到特定位置的功能。而这时，@daveobriencouk/animated-scroll-to 这个 npm 包就可以大显身手了。
什么是 @daveobriencouk/animated-scroll-to？
@daveobriencouk/animated-scroll-to 为我们提供了一个基于 JavaScript 的平滑滚动功能，可以直接集成到我们的前端项目中。
安装
使用 npm 安装组件：
npm install @daveobriencouk/animated-scroll-to --save
使用
使用该组件步骤如下：
引入组件：
import smoothScroll from '@daveobriencouk/animated-scroll-to';
使用组件：
smoothScroll.scrollTo(document.getElementById('myElement')); // 滚动到某个元素 smoothScroll.scrollTo(0, 500); // 滚动到页面前 500px 的位置
示例
下面是一个使用示例。
HTML
-- -------------------- ---- -------
------
------
---- ------ ---
----- ---------------- ------------------------------------------------------------------------------------
-------
-- ---- --
---------- -
------- -------
-
---- -
----------------- ----
------- ------
-
----- -
----------------- -----
------- ------
-
------ -
----------------- ------
------- ------
-
--------
-------
------
---- ---- ---
---- ------------------
---- -------- ------------------
---- --------- -------------------
---- ---------- --------------------
------
---- ------ ---
------- ------------------------------------------------------------------------------------------
---- ---- ---
--------
-------------------------------------------------------- ---------- -
-------------------------------------------------------
---
--------------------------------------------------------- ---------- -
--------------------------------------------------------
---
---------
-------
-------当我们点击红色区域时，页面就会平滑滚动到蓝色区域，再点击蓝色区域，页面就会平滑滚动到绿色区域。
总结
@daveobriencouk/animated-scroll-to 是一个非常实用的滚动组件，使用方便，效果平滑。相信在我们的前端开发中，它一定会给我们带来更好的体验效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005727c81e8991b448e8aef