最直接方式是用<a href="#letter-A">跳转到<h2 id="letter-A">A</h2>，id须唯一合法且不以数字开头；class不可用于锚点；需防固定导航栏遮挡，可用scrollIntoView()控制滚动行为与偏移；分组逻辑须统一处理重音字符；移动端需避免焦点误触发软键盘。
怎么用 <a> 实现点击跳转到页面内字母分组位置
靠 <a href="#letter-A"> 跳转到对应 <h2 id="letter-A">A</h2> 是最直接的方式，但必须确保目标元素有唯一且合法的 id 值。HTML5 允许字母、数字、连字符、下划线，但不能以数字开头——比如 id="1A" 会被部分老浏览器忽略锚点行为。
常见错误是写成 <div class="letter-A"> 然后试图用 href=".letter-A" 跳转：不行。class 不触发原生锚点滚动，href 必须指向 id。
- 每个字母分组标题用
<h2 id="letter-A">A</h2>，别用name属性（已废弃） - 导航栏里每个字母链接写成
<a href="#letter-A">A</a>，大小写要和id完全一致 - 如果词汇列表很长，建议在每个
id元素前加一点margin-top（比如style="margin-top: 60px;"），避免标题被固定导航栏遮挡
为什么 scrollIntoView() 比原生锚点更可控
原生锚点跳转无法控制滚动行为、偏移量或平滑度；遇到 sticky 导航栏时，目标元素常被截顶。用 JavaScript 的 scrollIntoView() 可以补足这些缺口。
它默认行为是“滚到可见区域顶部”，但加上参数就能改：element.scrollIntoView({ block: 'center', behavior: 'smooth' }) 更友好；若需避开顶部固定栏，得手动计算偏移：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
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 或正则提取“视觉首字母”，前端导航也按同一规则生成字母标签。
- 别用
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 全兜住。
