最直接方式是用跳转到a，id须唯一合法且不以数字开头；class不可用于锚点；需防固定导航栏遮挡，可用scrollintoview()控制滚动行为与偏移；分组逻辑须统一处理重音字符；移动端需避免焦点误触发软键盘。
怎么用 @#@#@#@#@#@#@#@#@#@0，大小写要和 id 完全一致
id 元素前加一点 margin-top（比如 style="margin-top: 60px;"），避免标题被固定导航栏遮挡为什么 scrollIntoView() 比原生锚点更可控
原生锚点跳转无法控制滚动行为、偏移量或平滑度；遇到 sticky 导航栏时，目标元素常被截顶。用 JavaScript 的 scrollIntoView() 可以补足这些缺口。
它默认行为是“滚到可见区域顶部”，但加上参数就能改：element.scrollIntoView({ block: 'center', behavior: 'smooth' }) 更友好；若需避开顶部固定栏，得手动计算偏移：
document.querySelector('#letter-B').scrollIntoView({
block: 'start',
behavior: 'smooth'
});
// 然后立刻 scrollBy(0, -60) 补偿导航栏高度
- 必须等 DOM 加载完再绑定事件，否则
querySelector找不到元素 -
behavior: 'smooth'在 Safari 旧版本不支持，可加try/catch回退到普通滚动 - 不要对每个字母链接都写一遍
scrollIntoView，统一用事件委托监听nav a更轻量
如何避免字母分组重复或漏词导致索引失效
索引不是静态写死的——词汇按首字母归类时，“Apple”、“Árbol”、“Über” 这类带重音或非 ASCII 字符容易归错组，用户点 “A” 却看不到 Árbol。
解决思路不是强行标准化输入，而是让分组逻辑和前端显示保持一致：后端或构建脚本统一用 Intl.Collator 或正则提取“视觉首字母”，前端导航也按同一规则生成字母标签。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 别用
word[0].toUpperCase()判断首字母，它对 “Éclair” 返回 “É”，而用户导航栏可能只写了 “E” - 实际分组可用
word.normalize('NFD').replace(/[\u0300-\u036f]/g, '')[0]去掉变音符号再取首字符 - 如果词汇来自 CMS 或 API，确保返回字段里带
sort_letter，前端只读这个值，不自己解析
移动端点击锚点后键盘没收起？这是 focus 顺序惹的祸
在 iOS Safari 上，点击字母链接后如果焦点意外落到某个 <input> 或可编辑区域，软键盘会弹出并卡住——本质是锚点跳转触发了某些元素的自动 focus()。
排查重点不在导航本身，而在目标分组区域里是否混入了 tabindex="0"、contenteditable 或隐藏但可聚焦的表单控件。
- 检查每个
id="letter-X"元素的父容器里有没有<input type="text">且未设disabled - 给导航链接加
onclick="event.preventDefault();"并手动触发滚动，能绕过部分浏览器的焦点劫持逻辑 - 真遇到顽固 case，可在跳转后加
setTimeout(() => document.activeElement?.blur(), 100)
字母索引看着简单，真正上线后最麻烦的往往不是跳转本身，而是不同设备对 id 解析的细微差异、焦点管理的连锁反应，还有用户真实输入的首字母多样性——这些没法靠一个 href 全兜住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
