在前端开发中，经常会使用到锚链接（anchor link）来实现页面内跳转。但是默认情况下，当用户点击锚链接时，页面会瞬间跳到目标元素所在位置，这种突兀的跳转体验可能会影响用户的浏览体验。
为了改善这个问题，我们可以通过实现单击锚链接时的平滑滚动效果，使页面在跳转时平缓过渡，从而提升用户的体验感。
实现方式
实现锚链接的平滑滚动效果有多种方式，其中比较常见的一种方式是通过 JavaScript 监听锚链接的点击事件，并使用 window.scrollTo() 方法实现平滑滚动效果。
具体实现步骤如下：
- 监听锚链接点击事件。
- 获取目标元素相对于文档顶部的距离。
- 计算滚动条需要滚动的距离。
- 使用
window.scrollTo()方法实现平滑滚动效果。
下面是一个示例代码：
--------- -----
------
------
----- ----------------
------------- --------------
-------
---------- -
------- -------
----------------- --------
-------- -----
-
------- -
------- ------
----------------- -----
----------- -----
-
--------
-------
------
---- ------------------
----- ----------------- -- --------------
---- -------------- ------------------
------
--------
-- ---------
-------------------------------------------------------- -- -
-------------------------------- -------- --- -
------------------- -- --------
----- ------ - --------------------------------------------------
----- --------- - ---------------------------------- - -------------------
----- ----- - -------------------
----- -------- - --------- - ------
----- -------- - ---- -- ----
--- --------- - -----
-------- ----------------- -
-- ---------- --- ----- -
--------- - ------------
-
----- ----------- - ----------- - ----------
----- ------- - -------------------------- ------ --------- ----------
------------------ ---------
-- ------------ - --------- -
----------------------------
-
-
-------- ---------------- -- -- -- -
- -- - - --
-- -- - -- ------ - - - - - - - - --
----
------ -- - - - -- - -- - -- - -- - --
-
----------------------------
---
---
---------
-------
-------在上面的示例代码中，我们首先监听所有以 # 开头的锚链接的点击事件，并在点击时阻止默认的跳转行为。接着，我们获取目标元素相对于文档顶部的距离，并计算出滚动条需要滚动的距离。
然后，我们使用 requestAnimationFrame() 方法实现滚动动画效果，并使用缓动函数 easeInOutQuad() 计算滚动位置，使滚动过程更加平滑自然。最后，我们通过调用 window.scrollTo() 方法实现滚动效果。
总结
通过实现单击锚链接时的平滑滚动效果，我们可以改善页面跳转时的体验感，提升用户的使用体验。在实现时，我们可以使用 JavaScript 监听锚链接点击事件，并通过计算滚动条需要滚动的距离和实现滚动动画效果，来实现平滑滚动效果
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8458