我之前也踩过这个锚点跳转的坑！尤其是页面有固定头部时，浏览器默认的锚点定位经常会被挡住，Chrome和Firefox都存在这个情况。给你几个靠谱的解决办法：

1. 现代浏览器首选：用scroll-margin-top CSS属性 #

这是最简洁的方案，专门为解决锚点被遮挡问题设计，Chrome、Firefox等现代浏览器都支持。直接给目标锚点元素设置该属性，值等于页面固定头部的高度（再加一点留白会更美观）：

#design {
  /* 假设固定头部高度70px，留10px留白 */
  scroll-margin-top: 80px;
}

它的作用是告诉浏览器：滚动到该元素时，要在元素顶部留出指定的margin空间，这样目标元素就不会被固定头部挡住，刚好显示在页面顶部（或你想要的位置）。

2. 兼容老浏览器的备选方案 #

如果你的页面需要兼容更老的浏览器（比如IE），可以用占位元素调整锚点位置：

方法A：padding + 负margin #

#design {
  padding-top: 80px;
  margin-top: -80px;
  overflow: hidden;
}

原理是给目标元素加顶部内边距占位，再用负外边距抵消，让锚点的实际定位位置上移，overflow:hidden能防止内容溢出。

方法B：伪元素占位 #

#design::before {
  content: "";
  display: block;
  height: 80px;
  margin-top: -80px;
  visibility: hidden;
}

在目标元素前插入一个看不见的占位块，把锚点定位位置往上推，效果和上面一致，且不会影响目标元素本身的样式。

3. 检查JS是否干扰默认滚动行为 #

有时候页面的JavaScript代码会阻止浏览器的默认锚点滚动行为，比如：

• React Router、Vue Router等路由框架接管页面导航，导致默认锚点失效
• 自定义平滑滚动脚本或点击事件中使用了event.preventDefault()

如果是框架项目，可以手动在组件挂载后处理锚点滚动：

// 以React为例
import { useEffect } from 'react';

function PageB() {
  useEffect(() => {
    const hash = window.location.hash;
    if (hash) {
      const targetElement = document.querySelector(hash);
      if (targetElement) {
        targetElement.scrollIntoView({
          behavior: 'auto', // 想要平滑滚动就改成'smooth'
          block: 'start' // 让元素顶部对齐视口顶部
        });
      }
    }
  }, []);

  return (
    // 页面内容
    <h2 id="design">Design</h2>
  );
}

4. 最后检查锚点ID的唯一性 #

别忽略最基础的问题：确保Page B里的id="design"是唯一的！如果页面中有多个元素使用同一个ID，浏览器只会定位到第一个匹配的元素，这也会导致预期外的结果。

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