area 标签无 id 属性，不能作为锚点目标，但可通过 href 指向页面内真实存在的带 id 元素实现跳转；需确保目标可见、非零高度，并用 scroll-margin-top 避开固定导航栏遮挡。
area 标签本身不支持 id，但能通过 href 指向外部锚点
HTML 的 <area> 是 <map></map> 内部使用的可点击区域标签，它没有 id 属性，也不能直接作为锚点目标（即不能被 href="#xxx" 滚动定位到）。它的作用只是“触发跳转”，不是“接收跳转”。所以你不能给 <area> 加 id="top" 然后指望页面滚到它那儿——浏览器会忽略这个 id。
但它可以像普通链接一样，用 href 指向页面内其他带 id 的元素：
-
<area shape="rect" coords="0,0,100,100" href="#section2">→ 点击该热区，页面滚动到<h2 id="section2"></h2> - 目标必须是页面中真实存在的、有对应
id的元素（区分大小写、不能含空格或中文） - 如果
href值写成#Section2但目标是id="section2"，跳转会静默失败
想让 area 点击后滚动到某位置，得确保目标元素存在且可滚动
常见错误是：写了 href="#faq"，但页面里根本没有 <div id="faq">，或者该元素被 <code>display: none 或 visibility: hidden 隐藏了——此时浏览器找不到目标，不会报错，但也不滚动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 目标元素最好是有明确高度的块级元素（如
<section id="contact"></section>），避免用空<span id="top"></span>—— 某些旧版 Safari 对零高度锚点定位不准 - 若目标在折叠内容里（比如 JS 动态展开的 FAQ），需先确保其已渲染；否则原生锚点跳转会失败，得改用 JS 手动
element.scrollIntoView() - 移动端 Safari 对
<area>的点击热区识别较弱，建议给<map></map>关联的<img alt="HTML怎么在映射区域添加锚点定位" >加loading="eager"并确保图片加载完成后再交互
固定导航栏遮挡锚点目标？scroll-margin-top 是首选解法
当 <area href="#features"> 触发跳转，而 <h3 id="features"></h3> 被顶部 position: fixed 导航栏盖住时，原生行为不会自动避让。
别用 JS 去监听 hashchange 再手动偏移——太重，且容易和路由库冲突。直接加 CSS：
h3[id] {
scroll-margin-top: 80px;
}
说明：
-
scroll-margin-top是现代浏览器标准方案（Chrome 61+、Firefox 68+、Safari 15.4+），无需 JS - 值设为导航栏实际高度（含 padding/border），可用
getComputedStyle(document.querySelector('header')).height动态读取 - IE 和旧 Safari 不支持该属性，若必须兼容，才考虑回退到
window.addEventListener('hashchange', () => { window.scrollBy(0, -80); })，但注意首次加载时location.hash不触发事件
area 锚点跳转在 SPA 中失效？绕过路由接管是关键
Vue Router / React Router 默认会拦截所有 a 和 area 的 href="#xxx"，当成路由路径处理，结果就是点击没滚动，甚至抛 404。
解决思路不是禁用路由，而是让跳转“逃逸”出去：
- Vue：给
<area>加target="_self"（强制原生行为），或用<router-link :to="{ hash: '#pricing' }" custom v-slot="{ navigate }"><area ...></router-link> - React Router v6+：不用
<link>包裹<area>，直接写原生<area href="#pricing">，并确保<router></router>的basename不干扰 hash - 通用兜底：用
onclick="event.preventDefault(); document.getElementById('pricing').scrollIntoView({ behavior: 'smooth' });"，但会丢失前进/后退历史记录
真正难处理的是动态生成的 <map></map> + <area>（比如地图 SVG 热区），目标 ID 在 DOM 渲染后才存在——这时候必须等 requestAnimationFrame 或 MutationObserver 确认元素挂载完毕，再绑定逻辑，否则 scrollIntoView 会找不到节点。
