Sticky元素存在时锚点滚动偏移20px的HTML/CSS/JS实现方案求助

问题描述 #

我给页面添加了带锚点滚动的sticky导航，锚点链接代码如下：

<a class="petite-police-tel" href="#BISHOKUS">BISHOKUS</a>

对应目标区块代码：

<div id="BISHOKUS" ...></div>

但由于sticky导航固定在顶部，锚点跳转后目标区块会被导航遮挡，无法与顶部对齐。需要实现锚点滚动时偏移指定像素，让目标区块刚好显示在导航下方。

附相关代码片段：

Sticky导航代码 #

<div class="sticky">
  <li style="padding: 5px; margin: 10px; display: inline-block; cursor: pointer;">
    <a class="petite-police-tel" href="#BISHOKUS" style="margin-top: 20px;">BISHOKUS</a>
  </li>
</div>

目标区块代码 #

<div id="BISHOKUS" class="cases-progr" style="position: static;background-color: #202225; padding: 25px; margin-top: 20px; margin-bottom: 10px; border-radius: 1.25rem;">
  <h1 style="margin-top: center;">Commandes Bishokus</h1>
</div>

方案一：纯CSS实现（无需JS） #

这是最简单的方法，适合对JS不熟悉的场景，有两种实现方式：

方法1：隐藏占位锚点 #

给目标区块上方添加一个隐藏的占位元素，高度设为sticky导航的实际高度，将原锚点id转移到这个占位元素上：

<!-- 新增占位锚点，高度替换为你的导航实际高度（示例为80px） -->
<div id="BISHOKUS" style="height: 80px; margin-top: -80px; visibility: hidden;"></div>

<!-- 原目标区块，移除id属性 -->
<div class="cases-progr" style="position: static;background-color: #202225; padding: 25px; margin-top: 20px; margin-bottom: 10px; border-radius: 1.25rem;">
  <h1 style="margin-top: center;">Commandes Bishokus</h1>
</div>

原理：占位元素占据导航高度的空间但不可见，锚点跳转至此处时，目标区块刚好显示在导航下方。

方法2：全局滚动内边距 #

给页面根元素设置scroll-padding-top，值等于sticky导航的高度：

html {
  scroll-padding-top: 80px; /* 替换为你的导航实际高度 */
}

这种方法无需修改HTML结构，直接添加CSS即可，现代浏览器兼容性良好。

方案二：JS实现（自定义滚动逻辑） #

如果需要动态计算导航高度或更灵活的控制，可使用JS实现，步骤如下：

1. 修改锚点链接：将href属性替换为data-target，保留目标区块的id值：

<a class="petite-police-tel" data-target="BISHOKUS" style="margin-top: 20px;">BISHOKUS</a>

2. 插入JS代码：将以下代码复制到HTML文件的</body>结束标签上方（确保页面元素加载完成后执行）：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带data-target属性的锚点链接
  const anchorLinks = document.querySelectorAll('[data-target]');
  // 替换为你的sticky导航实际高度（示例为80px）
  const navHeight = 80;

  anchorLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      // 阻止默认锚点跳转行为
      e.preventDefault();
      // 获取目标区块的id
      const targetId = this.getAttribute('data-target');
      // 获取目标区块元素
      const targetElement = document.getElementById(targetId);
      
      if (targetElement) {
        // 计算滚动位置：目标区块顶部距离 - 导航高度
        const scrollPosition = targetElement.offsetTop - navHeight;
        // 平滑滚动到指定位置（去掉behavior则为瞬间跳转）
        window.scrollTo({
          top: scrollPosition,
          behavior: 'smooth'
        });
      }
    });
  });
});

操作提示：直接复制代码粘贴到</body>前即可，无需额外配置，记得修改navHeight为你的导航实际高度。

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