在前端页面设计中，锚点是一种非常有用的技术，它允许用户直接跳转至页面上的某个特定部分。然而，有时我们需要以某个元素的具体像素位置作为锚点，而不是该元素所在的页面位置。在本文中，将介绍如何实现这一需求。
实现方式
要将锚点链接到特定像素位置，我们需要使用 JavaScript 计算出该元素相对于页面顶部的像素距离，并将其设置为锚点的目标位置。下面是一个简单的代码示例：
function setAnchor(link, target) {
link.addEventListener('click', function(e) {
e.preventDefault();
var top = target.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo(0, top);
});
}以上代码中，setAnchor 函数接受两个参数：锚点元素和目标元素。它使用 addEventListener 监听锚点的点击事件，在点击时计算目标元素相对于视口顶部的距离，并通过 window.scrollTo 方法滚动到该位置。
示例
假设我们有一个带有固定头部的列表，列表项包含内部锚点，当用户点击锚点时，应该滚动到列表项的顶部，而不是整个页面的顶部。以下是一个简单的 HTML 和 CSS 示例：
-- -------------------- ---- -------
------
--------
------ ---------
---------
----
----
-- ------------------ -----
-----
----
-- ------------------ -----
-----
---
-----
---- -----------------------
---- -----------
-------- ------
-------- ----- ----- --- ---- ----------- ----------- ---------
------
---- -----------
-------- ------
-------- ----- ----- --- ---- ----------- ----------- ---------
------
---
------
-------
-------
------ -
--------- ------
---- --
----- --
------ -----
-------- -----
----------------- -----
------ -----
-
--------------- - --- -
----------- -----
-------- -----
------- --- ----- -----
-
--------在上面的示例中，我们将 header 元素固定在页面顶部，并将每个列表项的锚点链接到对应的 div 上。接下来，我们使用上述 setAnchor 函数将锚点链接到目标位置：
var links = document.querySelectorAll('a[href^="#"]');
var containers = document.querySelectorAll('.list-container > div');
for (var i = 0; i < links.length; i++) {
setAnchor(links[i], containers[i]);
}以上代码中，我们选取所有以 # 开头的锚点链接和列表项容器，并使用 setAnchor 函数将它们绑定在一起。现在，当用户点击某个锚点时，页面将平滑地滚动到对应的列表项。
总结
本文介绍了如何将锚点链接到特定像素位置，需要计算目标元素相对于视口顶部的距离，并通过 window.scrollTo 方法滚动到该位置。同时，我们也提供了一个示例来演示如何将这种技术应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12962