在 Web 开发中经常会遇到需要将页面滚动条平滑、自然地滚动到某个固定位置的需求，这种需求一般用于单页应用中的锚点导航、跳转到内部链接等场景，提升了用户体验和页面交互性。Vue 是目前最受欢迎的前端框架之一，其强大的双向数据绑定和组件化开发特性使其成为了许多开发者的首选。下面将简要介绍如何利用 Vue 实现一个平滑滚动条滚到锚点位置的效果。
实现思路
为了实现平滑滚动条滚到锚点位置的效果，我们需要分为两个步骤：
- 获取锚点元素相对于页面顶部的距离；
- 利用 JavaScript 原生的
window.scrollTo()方法实现滚动到指定位置的效果。
在以上基础上，再利用 Vue 的数据绑定来实时获取页面滚动位置和更新滚动条位置，就可以实现一个平滑滚动条滚到锚点位置的效果。
实现代码
定义一个滚动到锚点组件 ScrollToAnchor，其中最重要的是 scrollToAnchor() 方法，用于实现滚动到锚点的效果。
-- -------------------- ---- -------
----------
---- -------------------------
-----
-- ------------- -- -------- ---------- - ---------- ------ ------
------
---------
-------------
----------
------
-----------
--------
------ ------- -
------ -
------ -
-------- --------- --- -------- --- -------- ----
---------------- --
-
--
--------- -
--------------------------------- ------------------
--
--------------- -
------------------------------------ ------------------
--
-------- -
---------------------- -
----- ------- - -------------------------------
----- --------- - -----------------
----- ---------------- - --------- - --
----- -------- - -------------- -- -
----- --------------- - ------------------
-- ---------------- -- ----------------- -
------------------ --------------- - ---
- ---- -
-----------------------
-------------------- - ------------------
-
-- ---
--
-------------- -
-------------------- - ------------------
--
--
-
---------
------ -------
----------------- --- -
--------- ------
---- ----
------ -----
---------- -----------------
-------- -----
--------------- -------
------------ ---------
-
----------------- --- - -
-------- -------------
-------- -----
-
----------------- ------- -
------------ ------
-
----------------- ------- -- -
----------- --
-
----------------- ------- - -
----------- -----
-
--------在模板中，我们首先定义一个用于触发滚动的锚点导航。接着我们将组件的内容包裹在一个 section 元素中，这个元素的 padding-top 值应该和锚点导航条的高度一致，以使锚点导航条悬浮在可视窗口的顶部。我们还定义了 CSS 样式来设置导航条的样式和位置。
在组件的 data 属性中，我们定义了用于渲染锚点导航栏的 anchors 数组，并且定义了一个名为 currentPosition 的变量，用于实时获取页面的滚动位置，以便后面调整滚动条位置。
在 mounted 钩子中，我们监听了 scroll 事件，这个事件会在页面滚动时触发。我们在该事件回调函数中，响应式更新了 currentPosition 变量的值。
在组件的 methods 属性中，我们定义了 scrollToAnchor() 方法，它接收一个字符串类型的参数 anchor，代表要滚动到的锚点元素的 ID。我们通过 JavaScript 原生 API document.getElementById() 来获取到该元素的位置，然后计算出了需要滚动到的位置。在一个 setInterval 循环中，我们判断当前滚动条位置是否小于等于需要滚动到的位置，如果是则使用 window.scrollTo() 方法来滚动页面，否则清除循环，并更新 currentPosition 变量的值。
最后，我们在模板中将锚点导航条的每个链接的 click 事件绑定到了 scrollToAnchor() 方法上，以实现点击链接后平滑滚到锚点位置的效果。
总结
本文通过一个 Vue 组件来介绍了如何实现一个平滑滚动条滚到锚点位置的效果。这个组件利用了 Vue 的数据绑定能力，结合 JavaScript 原生 API 来实现了该效果。通过阅读本文，读者能够深入了解如何在 Vue 应用中实现滚动到锚点的效果，从而提升用户体验和交互性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64675218968c7c53b07b63f3