html页面内跳转用id锚点：目标元素设唯一id（不以数字开头），链接写为；带参数url需保留#不被覆盖；为可访问性，目标元素应加tabindex="-1"并调用focus()。
HTML里怎么用id做页面内跳转锚点
直接用id属性标记目标位置，再用#id名在链接里引用——这是最轻量、兼容性最好、也最不容易出错的方式。
别用name属性（已废弃），也别套@#@#@#@#@#@#@#@#@#@0，注意#不能漏
<h2 id="api-reference">API参考</h2>，跳转后浏览器会自动滚动并聚焦该元素带URL参数的页面怎么保留锚点跳转
比如从https://example.com/docs?version=2.1#config进页面，浏览器得识别#config并滚动过去。但手动拼接URL时容易丢掉锚点。
关键不是“怎么加”，而是“别覆盖”：只要URL末尾的#xxx没被JS重写或路由拦截，原生行为就生效。
- 前端路由（如React Router）默认会吃掉
#，需显式启用hash模式或用useHash配置 - 用
window.location.href = "page.html#footer"会触发整页刷新；改用window.location.hash = "footer"更安全 - 服务端返回的HTML里，
<a href="?q=test#results"></a>这种写法没问题，?和#共存是合法的
锚点跳转后焦点不明显？怎么让屏幕阅读器和键盘用户感知到
纯CSS滚动不会触发焦点管理，键盘用户按Tab可能找不到刚跳转到的位置，视障用户也容易迷失。
核心动作就一个：element.focus()，但得加tabindex="-1"才能让非可聚焦元素获得焦点。
- 给目标元素加
tabindex="-1"（如<div id="faq" tabindex="-1">...</div>） - 跳转后手动调用
document.getElementById("faq").focus() - 别用
tabindex="0"——它会让元素进入常规Tab顺序，破坏原有逻辑 - CSS可以加
:focus { outline: 2px solid #007bff; }强化视觉反馈
为什么点击锚点链接后页面闪一下又回顶部
典型症状：点<a href="#section2"></a>，页面先滚到#section2，瞬间又弹回顶部。大概率是JS监听了click或scroll事件，并执行了event.preventDefault()或意外修改了scrollTop。
- 检查是否有
document.addEventListener("scroll", ...)里写了scrollTop = 0 - Vue/React组件中，
router-link或<link>默认阻止默认行为，需显式加scrollBehavior或onScroll处理 - 某些懒加载库（如
lozad.js）会在滚动时重置容器高度，间接导致跳转偏移 - 临时调试：禁用JS，看原生锚点是否正常——能确定问题出在脚本而非HTML结构
锚点本身极简单，但一旦混入JS、CSS定位、SPA路由或无障碍需求，细节就藏在滚动时机、焦点状态和DOM可访问性里。别假设“写了id就一定动”，多看控制台有没有Failed to execute 'focus' on 'HTMLElement'这类报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
