当我们使用锚链接进行页面内导航时，浏览器默认会将页面滚动到目标元素的顶部。但是有时候，我们希望将元素滚动到屏幕中央，以便更好地展示其周围的内容。在这种情况下，可以使用jQuery来实现此功能。
实现方法
要将一个元素滚动到屏幕中央，我们需要先计算出该元素相对于文档顶部的距离，然后再减去屏幕高度的一半即可得到需要滚动的距离。具体实现代码如下：
-- -------------------- ---- -------
------------ -
----------------------------- ----------- -
-------------------
--- ------ - -------------
------ - ------------- - ------ - ---------- - ------------------- ------
-- --------------- -
--- -------- - ------------------- - ------------------- - --------------------- - --
-------- ----------------
---------- --------
-- ------
-
---
---在上面的代码中，我们通过监听所有包含锚点(#)的标签的点击事件来实现页面内导航。接着，我们获取目标元素的位置，并计算需要滚动的距离scrollTo。最后，我们使用jQuery的animate()方法来实现平滑滚动效果。
示例代码
为了更好地理解上述方法，我们可以通过以下示例代码进行实践：
-- -------------------- ---- -------
------
---------------------
-----
----
------ ------------------------------
------ ------------------------------
------ ------------------------------
-----
------
------
-------- --------------
-------------
-----------------
----------
-------- --------------
-------------
-----------------
----------
-------- --------------
-------------
-----------------
----------
-------
------- -----------------------------------------------------------
--------
------------ -
----------------------------- ----------- -
-------------------
--- ------ - -------------
------ - ------------- - ------ - ---------- - ------------------- ------
-- --------------- -
--- -------- - ------------------- - ------------------- - --------------------- - --
-------- ----------------
---------- --------
-- ------
-
---
---
---------
-------在这个示例中，我们创建了一个包含三个锚点的导航菜单，并且每个锚点都指向页面中的一个
<section>元素。当用户点击导航菜单中的链接时，页面会平滑地滚动到相应的<section>元素并将其滚动到屏幕中央。总结
在前端开发中，实现页面内导航是常见需求。通过使用jQuery和上述方法，我们可以轻松地将目标元素滚动到屏幕中间而不是顶部，从而提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29545