ng2-scroll-to-el 可以轻松帮助你在 Angular 应用程序中实现滚动到元素的功能。它提供了一种简单的方法来在页面滚动时定位元素，比如在导航到特定路由时，滚动到相应的区域。
在本篇文章中，我们将通过一个简单的例子来学习如何使用 ng2-scroll-to-el。
安装
安装 ng2-scroll-to-el 最简单的方式是通过 npm。可以使用以下命令将其添加到项目中：
npm install ng2-scroll-to-el --save
使用
- 首先，先在你的 app.module.ts 中导入 Ng2ScrollToElModule：
-- -------------------- ---- -------
------ - ------------------- - ---- -------------------
-----------
------------- ---------------
-------- -
--------------
-------------------- -- ----
--
---------- --------------
--
------ ----- --------- - -- 在组件中，我们可以使用 @ViewChild 来引用需要滚动到的元素。
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------ - ------------------ - ---- -------------------
------------
--------- ---------------------
--------- -
------- -------------------------------------
---- ----------------------------
--
--
------ ----- ---------------------- -
----------------------- ---------- -----------
------------------- ------------------- ------------------- --
------------ -
----------------------------------
------- -----------------------------
--------- ----
------- -----
------- -----------------
---
-
-在这个例子中，我们通过 ng2ScrollToService.scrollTo() 方法来实现滚动到元素。我们需要传递一个 options 对象，其中包含：
- target：需要滚动到的元素。
- duration：滚动的持续时间，以毫秒为单位。
- offset：滚动的偏移量。可以选择添加或减去一个值来调整滚动的位置。
- easing：滚动的缓动函数。
接下来，我们需要在模板中添加一个按钮来触发 scrollToEl() 方法，这样我们就可以通过点击按钮来滚动到需要的元素了。
<button (click)="scrollToEl()">滚动到顶部</button>
示例代码
完整的示例代码如下所示：
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------ - ------------------ - ---- -------------------
------------
--------- ---------------------
--------- -
------- -------------------------------------
---- -------------- --------------
---- ----------------------------
--
--
------ ----- ---------------------- -
----------------------- ---------- -----------
------------------- ------------------- ------------------- --
------------ -
----------------------------------
------- -----------------------------
--------- ----
------- -----
------- -----------------
---
-
-总结
ng2-scroll-to-el 是一个非常有用的工具，可帮助我们轻松地在 Angular 应用程序中实现滚动到元素的功能。只需要按照本文提到的步骤，就可以轻松地开始使用了。希望本篇文章能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005707f81e8991b448e7e97