配置<base href="/">后同页锚点跳转至根路径如何解决？

问题本质是W3C标准规定<base>标签会作为页面所有相对URL的解析基准，添加<base href="/">后，浏览器会把href="#section2"这类页内锚点解析为根路径下的锚点地址/#section2，因此点击后会直接跳回首页，而非定位到当前页的对应区块。
除了逐个手动修改锚点为绝对路径、单独给每个锚点绑定JS跳转逻辑外，有两种低成本的批量修复方案：

• 全局JS委托修复（无需改动现有HTML）
  全站引入一次以下脚本即可，所有现有锚点无需修改即可正常工作，对后续动态加载的内容（比如AJAX渲染的评论、异步加载的文章区块）也自动生效：

  document.addEventListener('click', function(e) {
    const link = e.target.closest('a')
    if (!link) return
    const href = link.getAttribute('href')
    if (href?.startsWith('#')) {
      // 跳过绑定了自定义交互的锚点
      if (link.dataset.noScroll) return
      e.preventDefault()
      const target = document.querySelector(href)
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        })
        // 同步地址栏hash，保留原生锚点的访问记录能力
        history.replaceState(null, '', href)
      }
    }
  })
  

  如果有部分#开头的链接是用来触发弹窗、切换Tab等自定义交互，不需要滚动定位，只要给对应<a>标签加上data-no-scroll属性就会被自动跳过，不会影响原有逻辑。
• 构建/服务端渲染层面批量替换
  如果你的站点是静态构建（比如用Hexo、VitePress等工具生成）或者服务端渲染，可以在页面生成环节做统一替换：正则匹配所有href="#([^"]+)"的锚点标签，自动在#前拼接当前页面的路径，将其转换为当前页的绝对路径锚点，比如当前页路径为/docs/faq，就把href="#section2"替换为href="/docs/faq#section2"。这种方案完全不依赖客户端JS，浏览器原生即可正常解析跳转，兼容性最好。

目前没有纯HTML属性可以绕过<base>标签的URL解析规则，以上两种方案都可以避免逐个修改锚点的重复工作量。

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