在AngularJS中，$anchorScroll是一个服务，可以使用它实现页面的平滑滚动。默认情况下，它会直接跳转到指定的锚点位置，但是我们可以通过设置一些选项来实现平滑滚动和滚动持续时间控制。
1. 实现平滑滚动
要实现平滑滚动，我们需要在指令（或控制器）中注入$anchorScroll服务，并使用scrollTo方法来实现平滑滚动。例如：
----------------------- ---
--------------------- -------- -------- ---------- -------------- -
--------------- - -------- ---- -
-------------------
----------------
--
---在这个例子中，我们使用了$location服务的hash方法将id作为哈希值添加到URL中，然后调用$anchorScroll方法，就可以实现平滑滚动了。
2. 控制滚动持续时间
默认情况下，滚动时持续时间是500毫秒，如果我们想要调整持续时间，可以通过配置$anchorScrollProvider来实现。例如：
----------------------- ---
--------------------------------- ------------------------------- -
---------------------------------------------
-----------------------------------------------
---
--------------------- -------- -------- ---------- -------------- -
--------------- - -------- ---- -
-------------------
----------------
--
---在这个例子中，我们将持续时间设置为1000毫秒。
3. 示例
下面是一个完整的示例，可以让您更好地理解如何使用$anchorScroll服务实现平滑滚动和控制持续时间：
--------- -----
----- ---------------
------
----- ----------------
---------------- - ---------------------
------- -----------------------------------------------------------------
--------
----------------------- ---
--------------------------------- ------------------------------- -
---------------------------------------------
-----------------------------------------------
---
--------------------- -------- -------- ---------- -------------- -
--------------- - -------- ---- -
-------------------
----------------
--
---
---------
-------
--- -
------- -------
-------------- -----
-
--------- -
----------------- -------
-
--------- -
----------------- ----------
-
--------- -
----------------- -----
-
--------
-------
----- -----------------------
---- --------------
----------- ------
---
-- ------- -------------------------------------- -- ------- -----
----
------
---- --------------
----------- ------
---
-- ------- -------------------------------------- -- ------- -----
----
------
---- --------------
----------- ------
------
-------
-------在这个示例中，我们有三个div元素，每个div元素都有一个不同的背景颜色。每个div元素内部都包含一个指向下一个div元素的链接。当单击链接时，它将滚动到下一个div元素的位置，并且持续时间为1秒。
结论
$anchorScroll服务是AngularJS中实现平滑滚动的好方法。通过使用配置选项，我们可以轻松地控制滚动持
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25126