我之前做单页滚动网站时也遇到过一模一样的问题！全屏状态下锚点定位没问题，但移动端因为顶部导航栏是固定的，点击导航跳转到区块时，导航会挡住部分内容——本质原因是浏览器默认锚点定位是把目标元素顶到视口顶部，而固定导航栏占了顶部空间，导致内容被遮挡出现定位偏差。下面给你几个实用的解决办法：

方法一：用CSS scroll-margin-top 快速解决（推荐） #

这是最简洁的方案，现代浏览器都支持。给你所有的锚点元素设置一个顶部外边距，数值等于移动端导航栏的实际高度：

/* 假设你的移动端导航高度是80px，根据实际情况调整数值 */
[name="benefits"], [name="contact"], [name="其他区块名"] {
  scroll-margin-top: 80px;
}

原理很直白：这个属性会告诉浏览器，滚动到该元素时，顶部要留出指定的间距，刚好避开固定导航栏，完美对齐到你想要的位置。

方法二：JavaScript手动调整滚动位置（兼容旧浏览器） #

如果需要兼容一些比较老的移动端浏览器，可以用JS监听导航点击事件，手动计算滚动位置：

// 获取所有带锚点的导航链接
document.querySelectorAll('nav a[href^="#"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 先阻止默认的锚点跳转行为
    // 获取目标锚点的ID
    const targetId = this.getAttribute('href').slice(1);
    // 找到对应的锚点元素
    const targetElement = document.querySelector(`[name="${targetId}"]`);
    
    if (targetElement) {
      // 获取导航栏的高度
      const navHeight = document.querySelector('nav').offsetHeight;
      // 计算最终滚动位置：目标元素顶部距离 - 导航栏高度
      const scrollPosition = targetElement.offsetTop - navHeight;
      
      // 执行滚动，behavior: 'smooth' 可以实现平滑滚动，不需要的话可以去掉
      window.scrollTo({
        top: scrollPosition,
        behavior: 'smooth'
      });
    }
  });
});

这个方法兼容性更好，还能自定义滚动效果，比如平滑滚动过渡。

方法三：调整锚点元素的位置（不推荐，可能影响布局） #

如果你不想用CSS或JS，也可以修改锚点元素的定位，让它向上偏移导航栏的高度：

[name="benefits"] {
  position: absolute;
  top: -80px; /* 导航栏高度 */
  visibility: hidden; /* 隐藏锚点元素，避免影响页面布局 */
}

不过这个方法要注意，锚点元素的绝对定位可能会和页面其他布局冲突，所以除非万不得已，优先用前两个方法。

建议你先试试方法一，简单又高效，现在主流的移动端浏览器（比如Chrome、Safari）都支持scroll-margin-top属性了。如果测试后发现有兼容性问题，再换成方法二。

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