base标签会使href="#"被解析为绝对URL并触发页面重载，而非锚点跳转；正确做法是用JavaScript手动控制scrollIntoView或移除base标签。
base标签会让href="#"解析成绝对URL而非锚点
页面里写了，浏览器不会跳到#section2，而是拼出https://example.com/#section2——这会触发一次完整页面重载，地址栏变灰、滚动回顶。根本不是“偏移”，是根本没走锚点逻辑。
常见现象包括：点击“回到顶部”后页面闪一下、控制台没报错但Network面板能看到一次对/#section2的200响应（内容是整页HTML）；或者跳转后停在而不是处。
- 所有以
#开头的href都会被base劫持，不只是#，还包括./#section、sub/#section等相对写法 -
（React Router）不受影响，因为它们显式调用preventDefault() - 原生
标签无法通过CSS或属性绕过该行为，这是HTML规范强制要求
正确做法是彻底避开base对锚点的影响
别试图“修复”href="#section2"，直接换掉它。base的存在意味着你已接受所有相对URL需被重写，锚点也得按这个规则来——但锚点本就不该是URL，它是DOM定位指令。
- 把
href="#section2"改成href="javascript:void(0)"，再用addEventListener("click", () => {...})手动触发scrollIntoView() - 或者保留
href但加onclick="event.preventDefault(); scrollToTarget('section2'); return false;"，函数内调用document.getElementById("section2").scrollIntoView({ behavior: "smooth", block: "start" }) - 若必须兼容旧代码，可在
里加<script>document.addEventListener("click", e => { if (e.target.matches("a[href^='#']")) e.preventDefault(); });</script>统一拦截
scroll-margin-top对base导致的问题完全无效
scroll-margin-top只修正视觉偏移（比如fixed导航栏遮挡），但它生效的前提是：浏览器真正在执行锚点滚动。而base让href="#section2"压根没触发锚点行为，所以加再多scroll-margin-top都没用。
验证方式很简单：打开DevTools → Elements → 点击那个链接 → 查看Network面板是否出现新请求。如果有，说明base已接管，CSS偏移毫无意义。
- 不要在目标元素上写
style="scroll-margin-top: 64px"还指望它起作用 - 也不要用
padding-top或负margin-top去“挤位置”，这只会让重载后的页面布局更乱 - 真正要修的是跳转路径本身，不是跳转后的位置
SPA中用base时，锚点必须由JS完全接管
React/Vue项目常配href="#faq"这种写法等于主动放弃路由控制权，极易和useEffect监听location.hash冲突，导致两次滚动或状态不一致。
- Vue场景：改用
@click="$router.push({ hash: '#faq' })"，确保hash变更与路由系统同步 - React场景：用
useNavigate()配合location.pathname + "#faq"，避免直接操作href - 纯静态页：最简方案就是删掉
base标签本身没错，但它和锚点是两种互斥的URL解析机制。强行共存的结果，就是每次点击都变成一次猜谜：你不知道这次是跳锚点，还是重载页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
