最常见的原因是目标元素缺失id属性或id值与href不一致（如空格、大小写、中文）；浏览器严格区分大小写且id不可重复；动态渲染需等DOM挂载后再生成目录。
点击跳转到页面内某个 id 位置，为什么没反应？
最常见的原因是目标元素缺失 id 属性，或 id 值与链接中的 href 不一致（比如多了空格、大小写不匹配、用了中文）。浏览器对 id 匹配是严格区分大小写且不允许重复的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保每个目录项的
href形如#section-1，对应目标标题写成<h2 id="section-1">第一章</h2> - 避免用
class或其他属性替代id——<a href="#top">只认id，不认name（HTML5 已废弃name锚点） - 如果页面是动态渲染（如 Vue/React），要等 DOM 真正挂载后再生成目录，否则
getElementById找不到节点
scrollIntoView() 和原生锚点跳转的区别在哪？
原生 #xxx 跳转会触发浏览器默认滚动行为，可能有惯性、平滑度不可控；而 scrollIntoView() 是 JS 控制，能精确指定滚动方式和对齐位置，更适合做“返回顶部”这类需要统一体验的操作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 返回顶部按钮推荐用 JS +
scrollIntoView({ behavior: 'smooth' })，兼容性较好（Chrome 61+/Firefox 68+/Safari 15.4+） - 若需支持老浏览器（如 IE），改用
window.scrollTo({ top: 0, behavior: 'smooth' })，但注意它只滚到页面顶部，不处理锚点定位 - 不要混用：既写
href="#top"又绑定click事件调用scrollIntoView()，会导致跳两次
怎么让返回顶部按钮只在滚动一段距离后才显示？
靠监听 scroll 事件判断 window.pageYOffset（或 document.documentElement.scrollTop）是否超过阈值，再控制按钮的 display 或 opacity。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 阈值设为
300像素较合理，太小容易误触，太大失去意义 - 别在
scroll里直接操作 DOM 样式，加个节流（如setTimeout防抖）避免频繁重排 - 按钮本身建议固定定位：
position: fixed; bottom: 24px; right: 24px;，并设置z-index避免被遮挡 - 移动端要考虑安全区域，
bottom: env(safe-area-inset-bottom)可防止被刘海遮住
目录自动生成时，id 名称怎么保证唯一且可用？
手动写 id 容易重复或含非法字符（空格、中文、标点），导致跳转失败。必须清洗并标准化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用正则把标题文本转成 kebab-case：去掉所有非字母数字字符，空格换连字符，转小写，例如
"第二章：JavaScript 基础！"→"second-chapter-javascript-basis" - 检查是否已存在同名
id，存在则追加序号（-1、-2） - 避免用纯数字开头（如
1-intro），某些旧浏览器解析异常，可前置sec- - 生成后记得把新
id写回对应标题元素，否则链接仍无效
id 的同步时机。服务端渲染页面没问题，但 SPA 应用里，路由切换后新内容还没渲染完就生成目录，id 就会漏掉或错位。得等框架的 mounted / useEffect / DOMContentLoaded 触发后再执行。 
