能用纯html实现页面内跳转，90%失效问题源于id不匹配、dom未挂载或css截断滚动；需确保id合法唯一、目标可见、scroll-margin-top避让固定头部，并用html{scroll-behavior:smooth}启用平滑滚动。
能用纯 HTML 实现的页面内跳转，就别加 JS——90% 的“锚点失效”问题，根本不是代码写错了，而是 id 没对上、DOM 没挂载好，或者 CSS 把滚动上下文截断了。
href="#id" 跳不进去？先查这三件事
点击链接没反应，或滚到错误位置，大概率是目标元素没被浏览器识别为有效锚点：
-
id以数字开头（如id="1section"）：部分浏览器静默忽略，改用id="section-1" - 目标元素是 React/Vue 动态渲染的，但点击时 DOM 还没生成：可加
tabindex="-1"确保可聚焦，或等componentDidMount/mounted后再触发跳转 - 目标元素或其父容器设置了
display: none、visibility: hidden或overflow: hidden：这些会让offsetTop计算为 0，浏览器找不到有效坐标 -
href写成href="section1"或href="/#section1"：必须是href="#section1"，否则不是 hash 导航，而是普通路径跳转
scroll-behavior: smooth 加在哪才生效
加在 body 上无效是高频踩坑点。页面级滚动容器是 html 元素，不是 body：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确写法：
html { scroll-behavior: smooth; }，且要放在全局样式最前面，避免被 reset.css 覆盖 - 局部容器（如
<div class="chat-log">）也要平滑滚动？给它加 <code>scroll-behavior: smooth+overflow: auto（或scroll） - 如果仍不生效，检查系统偏好：
@media (prefers-reduced-motion: reduce)下该属性会被浏览器强制禁用 - 推荐：
#[target-id] { scroll-margin-top: 80px; }（数值等于 fixed header 的高度），浏览器自动修正滚动终点 - 备选：
element.scrollIntoView({ block: 'center' })，让目标垂直居中，天然避开顶部遮挡 - 绝对避免：
window.scrollTo(0, target.offsetTop - 80)，header 高度一变就错位，且不兼容 sticky/flex 布局 - 监听点击，
e.preventDefault()阻止默认行为，再用element.scrollIntoView()定位 - 若仍需 URL 同步（如分享链接），手动更新
location.hash，但不触发新 history 条目：history.replaceState(null, '', '#faq') - 注意：SPA 中路由已接管 hash，直接操作可能和框架冲突，优先走框架提供的导航 API
固定头部把目标元素盖住了怎么办
别在 JS 里手动减去 header 高度——响应式变化后立刻失效。CSS 方案更可靠：
hash 变更多、后退卡住怎么清理历史
每次点 href="#faq" 都 push 一条 history 记录，用户狂点返回会陷入循环。想干净跳转就得绕过原生 hash 行为：
真正难的从来不是“怎么跳”，而是“跳得准”——ID 合法性、DOM 存在性、滚动上下文完整性，三者缺一不可。一个 :target 伪类样式加下去，就能立刻验证当前是否真定位成功。
