产品详情页有整机图、参数、部件和附件，内容多并不一定是坏事。问题在于客户想找参数，却不知道还要往下滑多久。这篇教你先做一套最小可用的页面目录，再处理固定页头、手机和错误链接。
我读取齐鲁机械的产品页时，看到按内容章节组织的入口。因此这里以它作为观察起点，另给一套可复制的教学代码。教学代码不是该网站的后台实现，也不会自动替你整理已有章节。
第1步：先写目录清单，不先加悬浮效果
打开准备整理的产品页，从上到下列出真正存在的内容。每一项写“客户要找什么”，不要把页面装饰标题全部塞进目录。
| 客户任务 | 目录名称 | 目标区块 | 是否存在 |
|---|---|---|---|
| 快速认识产品 | 产品概览 | 概览介绍 | 检查后填写 |
| 查看正式数据 | 技术参数 | 参数表与条件 | 检查后填写 |
| 确认扩展选项 | 附件与选项 | 附件及适配说明 | 检查后填写 |
页面没有视频，就不要先放一个“视频”入口等以后补。目录项少一点没关系，空目标会让客户以为点击没有反应。
这里使用齐鲁机械公开产品入口图片说明页面对象，不是本教程完成后的页面截图。目录是帮助寻找资料的结构，不能用产品图替代目标内容。
第2步：给每个目标区块一个唯一标识
在编辑器允许设置 HTML 锚点的位置，分别填入稳定且不重复的标识。若通过 HTML 编辑，把标识写进目标容器的 id。同一页内不能两个区块用同一个值。
不要把经常变化的宣传句直接当标识。目录文字以后可以优化，标识尽量保持稳定；否则曾分享给客户的章节链接会失去目标。
做完检查：逐项记录“目录名—目标标识”，确认每项一对一。先完成这张对应表，再做目录样式。
第3步：复制最小结构，先验证跳转
把下面代码放进测试页面的自定义 HTML 容器。它包含目录和三个目标区块，先点链接确认浏览器能定位，再把段落换成正式内容。不要把示例文字留到生产页。
<nav aria-label="产品内容目录">
<a href="#tutorial-overview">产品概览</a>
<a href="#tutorial-specs">技术参数</a>
<a href="#tutorial-attachments">附件与选项</a>
</nav>
<section id="tutorial-overview"><h2>产品概览</h2><p>放入已审核介绍。</p></section>
<section id="tutorial-specs"><h2>技术参数</h2><p>放入已审核参数。</p></section>
<section id="tutorial-attachments"><h2>附件与选项</h2><p>放入适配说明。</p></section>链接中井号后的内容要与目标 id 完全相同。大小写、连字符和多余空格都要检查。HTML 链接的行为可参阅MDN 链接文档。
若页面由组件生成，优先在实际目标区块设置标识，不要在上方另放一个看不见的空标签充当目标。后续移动内容时，空标签与正文容易分开。
多种产品页面可以复用同一种目录规则，但每页应按实际内容生成条目；不能因为模板有五项，就要求每台机器都显示五个空章节。
第4步：标题被固定页头挡住时，再加偏移
点击参数后，如果页面已经滚到相应位置，但标题躲在固定导航后面，先检查是不是顶部遮挡，不要立即增加复杂脚本。
可给目标区块设置 scroll-margin-top。下面的 120 像素只是教学起点，需要按实际页头和屏幕宽度调整，不是齐鲁机械的测量值。
#tutorial-overview,
#tutorial-specs,
#tutorial-attachments {
scroll-margin-top: 120px; /* 示例值：按实际固定页头高度调整 */
}CSS 放在站点允许管理样式的位置，由有权限的维护者保存；不要把样式代码粘成可见正文。属性说明见MDN scroll-margin-top。
桌面与手机页头高度可能不同。先分别点击同一目标，再调整对应样式。别用一次桌面检查，推断所有宽度都正确。
第5步：能跳了，再决定是否固定目录
最小链接能用后，才讨论目录是否跟随滚动。固定目录会占据空间，手机端如果又有底部咨询栏，可能挤压正文。不能把固定效果当作默认升级。
如果只需要几个入口，可以保留普通横向或纵向列表。需要折叠时，确保展开与关闭能通过触摸、鼠标和键盘完成。不要做只有悬停才能出现的手机交互。
暂时不加“当前章节高亮”也能交付可用目录。若要加高亮，另行规定切换条件，避免手动点击后标在一项、滚动后内容却已经进入另一项。
第6步：照这五个动作验收
- 逐项点击，检查目标标题和内容正确。
- 用键盘 Tab 找到链接，按 Enter 能进入目标。
- 复制带井号的完整地址，在新标签打开，检查能直接定位。
- 在窄屏下打开，检查目录与固定按钮是否遮挡内容。
- 等待图片完成加载后再观察，检查内容跳动有没有把目标推离预期位置。
记录实际结果，不只写“目录可用”。如果直接打开章节链接正常、点击却不正常，检查主题是否拦截了链接；若图片加载后错位，检查媒体尺寸预留；若只有某项失败，先查对应标识而不是重做整套导航。
常见错误，按这个顺序排查
地址没有变化且页面不动，先查链接与点击拦截；地址出现井号但目标错误，查重复标识；位置正确但标题看不见，查固定页头；只有编辑预览正常，查游客端输出和缓存。
改标题时顺手改了锚点，要检查旧章节地址是否仍有使用需求。不要在不知情的情况下批量重命名全部目标。
交付物是一张章节对应表、一套实际链接、一份桌面与手机检查记录。对于完整页面结构，继续参考齐鲁机械改版复核；素材加载的取舍，可看产品素材流程。先让客户找得到资料，再考虑动画和高亮效果。
