如何为href设置指定滚动距离？解决锚点定位过高问题

方法一：CSS 快速设置偏移（推荐现代浏览器使用） #

给需要锚定的目标元素添加 scroll-margin-top 属性，直接定义锚点定位时的顶部偏移量，无需修改JS：

#example1 {
  scroll-margin-top: 80px; /* 替换为你需要的偏移距离 */
}

设置后，点击指向该id的锚点链接时，浏览器会自动在目标元素上方留出指定的空白距离，解决定位偏高的问题。

方法二：JavaScript 自定义滚动行为（兼容旧浏览器/灵活控制） #

如果需要更复杂的逻辑（比如不同链接不同偏移），可以通过JS手动控制滚动位置：

1. 先修正你的锚点代码（注意标签闭合）：

<div id="example1">example</div>
<a href="#example1" class="adjust-anchor">example2</a>

2. 添加JS代码监听点击事件，自定义滚动位置：

document.querySelectorAll('.adjust-anchor').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      // 计算滚动位置：目标元素顶部 - 自定义偏移量
      const scrollPosition = target.offsetTop - 80;
      window.scrollTo({
        top: scrollPosition,
        behavior: 'smooth' // 可选，开启平滑滚动
      });
    }
  });
});

将代码中的 80 替换为你实际需要的偏移数值即可。

补充：修正你示例中的代码错误 #

你提供的示例存在标签闭合问题，正确的锚点代码写法如下：

<div id="example1">example</div>
<a href="#example1">example2</a>

内容的提问来源于stack exchange，提问作者rapid