摘要：说明产品页目录锚点跳转后被固定导航遮挡的原因，并用唯一ID、标题偏移、焦点处理、历史地址和多终端深链接测试修正阅读位置，确保客户准确落到目标段落。
销售把产品页中的“安装尺寸”链接发给客户，客户打开后网址已经带上#installation，页面却停在一个看不懂的位置：目标标题正好被顶部固定导航盖住，只能看到下一段正文。锚点本身没有失效，问题在于浏览器把目标元素贴到视口顶端，而导航仍占着这块空间。修正时要同时处理标题偏移、唯一ID、焦点和不同入口的深链接测试。
锚点跳到了目标，为什么标题仍然看不见
页内目录常把链接写成href="#installation"，对应标题使用id="installation"。浏览器定位时默认让目标元素靠近视口上边缘。若页面有80 px高的固定导航，标题就会落在导航下方。电脑端导航较矮、手机端还有两行菜单时，被遮住的高度可能不同，所以只在编辑人员的电脑上调一个固定空行并不可靠。
另一个常见原因是ID重复。产品说明里有两个“Technical Data”，编辑器自动生成相同ID，目录点击后总是停在第一处；页面更新语言或复制模块后，旧链接又可能指向已经删除的ID。每个公开段落应有稳定且唯一的英文ID，例如installation-dimensions、electrical-data和maintenance-access，不要直接用会变化的标题文字或内部序号。
用标题偏移和焦点处理代替空白占位
更稳妥的做法是在可作为目标的标题上设置scroll-margin-top，数值由导航实际高度加一段阅读间距组成。桌面导航为80 px时，可以从96 px开始检查；手机端若导航折叠后高度变化，应在对应断点使用新的值。页面采用整块区域作为目标时，也可使用scroll-padding-top，但要确认它施加在真正滚动的容器上，而不是只写给body。
页面若同时存在顶部导航和页内粘性目录，偏移要按当前断点下两者的总占用高度计算。折叠菜单关闭后不再占位的区域不要算入，预览环境里的管理工具条也不能写进公开样式。验收时可以读取导航的getBoundingClientRect结果，与目标标题top值比较；正式样式仍应有清晰的CSS基线，避免脚本在每次滚动时反复计算而引起画面跳动。
不要在每个标题前插入空的div或连续换行来“顶开”位置。这类占位会改变正文间距，后台再次编辑时容易被删，搜索进入页面也可能读到无意义节点。ID应放在有语义的H2上，目录文字与标题保持一致。若固定导航高度来自CSS变量，可以让偏移引用同一个变量，避免导航改版后锚点规则继续沿用旧数值。
点击目录后还要让键盘使用者知道位置已经变化。页面通过脚本平滑滚动时，应把焦点移到目标标题，并保留清晰的焦点样式；不能只移动画面而让读屏顺序停在原按钮。使用浏览器原生锚点时，要确认Tab键继续操作不会突然回到页首。动画还应尊重减少动态效果的系统设置，避免长距离滚动造成不适。
从搜索入口、复制地址和返回操作完成验收
验收时不要只点页面目录。直接在新窗口打开完整地址，例如/product-a.html#installation-dimensions，确认首屏加载后目标标题完整露出，导航没有覆盖标题或第一行正文。再从其他段落复制地址发送到手机，检查浏览器地址栏保留片段标识，刷新页面仍停在同一段，图片延迟加载后也没有把目标位置推走。
目录连续点击三处时，地址应随当前段落变化，浏览器返回键能按访问顺序回到上一处，而不是直接离开页面。若网站脚本使用history.pushState或replaceState，要明确哪种操作需要生成历史记录。销售常把带锚点的地址粘贴进邮件或聊天工具，还要确认系统不会把#后的内容截掉。
移动端分别测试折叠菜单关闭和展开后的状态，记录innerWidth、导航实际高度、目标标题top值和页面scrollWidth。标题top应大于导航bottom，并留出可读间距；页面宽度不能因长ID、代码片段或表格产生横向滚动。锚点验收通过的标准很朴素：客户从目录、搜索结果或销售转发地址进入，都能立即看见被承诺的那一段，而不是只看到一个正确却难用的网址。
