锚点跳转失效主因是标记不规范：href与id须严格一致（大小写、符号敏感），id不能数字开头，需用字母开头加连字符；目标元素必须存在、可见且可滚动；固定头部遮挡应优先用scroll-margin-top解决；scroll-behavior: smooth必须写在html上才生效。
直接用 href="#id" 跳转本身没问题，但“能跳”不等于“跳得准”——90% 的锚点失效不是 JS 写错，而是标记不规范导致目标找不到或滚动错位。
锚点 href 和 id 必须严格一致
浏览器按字符串精确匹配 href 值和 id 值，大小写、连字符、下划线、空格全算在内。空格会被编码成 %20，id="about us" 永远不会匹配 href="#about us"。
-
id不能以数字开头（如id="1section"），部分老浏览器静默忽略 - 推荐命名：字母开头 + 连字符分隔，例如
id="contact-form"、id="faq-section" -
href必须是纯 hash 格式：href="#contact-form"，不是href="contact-form"或href="/#contact-form" - 避免使用
name属性替代id，HTML5 中已不推荐用于锚点定位
目标元素必须可滚动且可见
浏览器只对“存在、渲染完成、且不在隐藏状态”的元素计算滚动位置。DOM 存在但不可见，scrollIntoView() 和原生锚点都会失败或滚到错误位置。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 不能是
display: none、visibility: hidden，也不能被父容器的overflow: hidden截断 - 动态渲染内容（Vue/React/AJAX）需确保点击时目标已挂载；否则
document.getElementById("xxx")返回null - 若页面高度不足一屏，
html不可滚动，scroll-behavior: smooth直接无效 - 某些框架（如 Next.js）会在
html外层插入 wrapper，此时真实滚动根节点可能是document.documentElement，需检查 DevTools 中 computed 样式
固定头部遮挡问题怎么解？别手动算偏移
目标元素顶部被 position: fixed 导航栏盖住，是高频问题。手动减去 offset 容易出错，也破坏文档流。
- 优先用 CSS：
#contact-form { scroll-margin-top: 80px; }（值对应 header 高度） - 不要用
margin-top: -80px+padding-top: 80px模拟，会导致 JS 获取offsetTop失真 - 若需兼容 Safari ≤15.3，JS fallback 中可改用
getBoundingClientRect().top + window.scrollY计算真实位置 -
scroll-margin-top在旧浏览器中不支持，但比 JS 更稳定、更少时机依赖
为什么 scroll-behavior: smooth 写在 body 上没用？
这个属性只对**实际滚动容器**生效，而页面级滚动容器是 html 元素，不是 body。写错位置等于没写。
- 正确写法只有：
html { scroll-behavior: smooth; }，放在全局样式最前面 -
body { scroll-behavior: smooth; }多数情况下完全无效，DevTools 中查不到该声明生效 - 检查是否被重置样式覆盖，例如某些 UI 框架会加
html, body { scroll-behavior: auto !important; } - 系统开启「减少动画」偏好（
@media (prefers-reduced-motion: reduce)）时，该属性会被浏览器强制禁用，无法绕过
真正容易被忽略的是：平滑滚动不是让页面“变可滚动”，而是控制已有滚动行为的动画表现；它只响应原生锚点跳转和 scrollIntoView()，对 window.scrollTo(0, y) 这类旧式调用默认不生效，必须显式传对象参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
