如何在设置<base href="">的页面中实现无刷新锚点跳转？

我太懂这个坑了！设置了<base>标签后，原本的#myid锚点会被浏览器解析成基准URL加上锚点（也就是http://www.example.com/#myid），而不是当前文档的http://www.example.com/mydocument.htm/#myid，导致跳转跑偏。下面给你几个切实可行的解决方案：

方案1：纯HTML修改链接（最简单） #

直接把锚点链接的href改成./#myid，利用相对路径指向当前文档所在的位置：

<a href="./#myid">跳转到myid元素</a>

原理是./会基于<base>的基准URL，定位到当前文档的路径，再加上锚点就会指向当前文档内的目标元素了。这个方法不需要写JS，适合静态页面。

方案2：JavaScript控制跳转（灵活且支持平滑滚动） #

如果需要更灵活的控制（比如平滑滚动、动态生成的链接），可以用JS拦截点击事件，手动处理锚点跳转：

// 给所有以#开头的锚点链接绑定点击事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    // 阻止默认的跳转行为
    e.preventDefault();
    // 获取目标锚点ID
    const targetId = this.getAttribute('href');
    // 找到页面内对应的元素
    const targetElement = document.querySelector(targetId);
    
    if (targetElement) {
      // 滚动到目标元素，behavior: 'smooth'是可选的平滑滚动效果
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      // 可选：更新浏览器地址栏的hash，保持URL和当前位置一致
      window.history.pushState(null, null, `${window.location.pathname}${targetId}`);
    }
  });
});

这个方法能完美适配各种场景，还能自定义滚动效果。

方案3：硬编码文档路径（适合固定路径的页面） #

如果你的文档路径固定不变，也可以直接把锚点链接写成完整的相对路径：

<a href="/mydocument.htm/#myid">跳转到myid元素</a>

这种方法虽然直接，但如果后续文档路径变动，需要手动修改所有链接，灵活性稍差。

为什么会出现这个问题？ #

<base>标签的作用是为页面中所有相对URL设定一个基准地址。当你使用#myid这种仅包含锚点的链接时，浏览器会自动把它和<base>的href拼接，变成http://www.example.com/#myid，而不是当前文档的完整路径加锚点，这就是跳转失败的根源。

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