同页面Anchor Tag跳转失效：点击仅刷新页面，求问题排查

嘿，我太懂这种闹心的感觉了！锚点明明设置好了，点下去却只刷新页面，完全不跳转。我帮你梳理几个最常见的问题，你对照着排查下：

• 目标元素的id没设置对（或者根本没设置）
  现在HTML标准里，锚点跳转靠的是目标元素的id属性定位，旧的name属性已经不推荐啦！比如你的锚点链接是 <a href="#my-target">跳转</a>，那目标元素必须要有 id="my-target"，示例代码：

  <div id="my-target">这里是你要跳转到的内容</div>
  

  要是你还用着 <a name="my-target"></a> 这种旧写法，现在很多浏览器可能不认，赶紧换成id。

• 锚点的href值写错了
  别小看大小写！HTML的id是区分大小写的！比如你链接写的是 <a href="#My-Target">，但目标元素的id是my-target，浏览器就找不到目标，直接刷新页面。另外还要检查有没有多余的空格，比如href="# my-target"（多了空格）也会失效。

• 页面里有重复的id
  每个元素的id必须是唯一的！如果有两个元素都用了id="my-target"，浏览器不知道该跳哪个，就会直接刷新页面。打开浏览器开发者工具（F12），搜一下你的目标id，看看是不是重复了。

• JavaScript阻止了默认跳转行为
  要是你的页面里有监听<a>标签点击的JS代码，不小心调用了event.preventDefault()，但又没手动处理锚点跳转，就会出现这种情况。比如：

  document.querySelector('a').addEventListener('click', (e) => {
    e.preventDefault(); // 阻止了默认跳转
    // 这里没写锚点滚动的逻辑，就只会刷新页面
  });
  

  解决办法要么去掉不必要的preventDefault()，要么手动加上滚动逻辑：

  const targetId = e.target.getAttribute('href').slice(1);
  document.getElementById(targetId)?.scrollIntoView({ behavior: 'smooth' });
  

• 动态生成的锚点或目标元素
  如果你的锚点链接或者目标元素是用JS动态生成的，要确保生成的时候href值是正确的#xxx格式，而且目标元素已经存在于DOM中了。比如你先加了锚点，后来才生成目标元素，那点击的时候肯定找不到。

要是这些都排查完还是有问题，把你的具体代码贴出来，我帮你精准定位！

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