锚点链接触发404的根本原因是href值非纯锚点（如漏#或含路径），导致浏览器发起真实HTTP请求；需检查href是否严格以#开头、目标id是否存在且合法、排除base标签及前端路由干扰。
锚点链接本身不会触发404——出现404说明浏览器根本没执行锚点跳转，而是发起了一个真实HTTP请求。 本质是：你写了 <a href="#section1">，但实际发出的请求却是 /section1 或 /page#section1 这类带路径的地址，服务器找不到对应资源就返回了404。
检查 href 值是否意外含路径（不是纯锚点）
最常见错误：把 #section1 写成 section1 或 ./#section1，漏掉 # 符号或加了非法前缀。
- 打开开发者工具 → Elements 面板，定位到该
<a>标签，确认href属性值**严格以#开头**，如href="#faq"；href="faq"是相对路径跳转，会触发新页面请求 - 注意引号问题：
href=#section1（无引号）会被 W3C 解析为href="<当前URL路径>#section1"，但部分浏览器可能截断，导致实际请求变成/faq类路径 - 避免在
href中混用 JS 拼接逻辑，比如href="${base}/#section1"—— 多余的/可能让浏览器误判为路径分隔符
确认目标元素 id 存在且合法
即使 href 正确，跳转也会静默失败（不报错但不动），而某些前端路由或重写规则会把无效锚点请求兜底转发成 404。
- 在 Elements 面板搜索
id="section1"（替换为你实际用的 id），确保该元素存在、未被 JS 动态移除、且不在display: none的父容器中（部分旧浏览器不支持隐藏区域内的锚点定位） - id 值不能以数字开头（如
id="1st-item"），不能含空格或中文（id="常见问题"会解析失败），建议只用字母、数字、连字符和下划线 - 如果目标元素是 JS 渲染的（如 React/Vue 组件内动态生成），需确认它已在 DOM 中挂载完成后再点击链接；否则锚点定位无目标，部分 SPA 框架可能 fallback 到 404 页面
排查 base 标签或前端路由干扰
<base> 和前端路由 history 模式会劫持所有相对链接行为，包括锚点——它们可能把 #section1 当作新路径处理。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 查看页面源码，是否存在
<base href="/app/">？如果有，<a href="#section1">实际会被解析为/app/#section1；若当前 URL 是/blog/，浏览器可能尝试请求/blog/app/#section1，最终 404 - 若项目用了 Vue Router / React Router 的 history 模式，且未关闭
scrollBehavior或配置了fallback，某些版本会把带#的链接也当作路由路径处理，尤其当 URL 已含 hash 时 - 临时禁用前端路由（如注释掉 router 初始化代码）或移除
<base>，直接用原生 HTML 测试锚点，可快速隔离是否为框架干扰
区分真实 404 和假性跳转失败
有些“404”只是表象，实际是浏览器没发请求，或发了但被拦截——得靠 Network 面板验证。
- F12 → Network → 勾选
Preserve log→ 点击链接 → 查看是否有新请求出现在列表中：没有新请求 = 锚点逻辑未触发（可能是 JS 阻止了默认行为、target 属性干扰、或事件绑定错误）；有请求且状态码为 404 = 真实路径错误 - 若请求 URL 显示为
https://example.com/page#section1（带完整域名和 hash），但状态码是 404，说明服务器把整个 URL 当作了路径处理——这几乎一定是后端 Nginx/Apache 配置了错误的重写规则，把 hash 后内容也纳入了匹配范围 - 状态码为 0？大概率是跨域、
file://协议限制，或 CSPconnect-src拦截了导航，和锚点本身无关
真正容易被忽略的是：锚点失效时，人本能去查目标元素是否存在，却很少回头看 <a> 的 href 是否被 JS 动态改写过，或者是否被某个 CSS pointer-events: none 拦截了点击。这类问题不会报错，Network 里也没请求，但结果就是“点了没反应”，误判为 404。
