横向导航点击未滚到目标位置，90%是id匹配失败或目标未就绪；必须用合法id（字母开头、小写短横线、全局唯一），配合scroll-margin-top解决fixed遮挡，SPA需绕过路由拦截或手动scrollIntoView。
横向导航点击后没滚到目标位置，90% 是 id 匹配失败或目标未就绪，不是 JS 写得不够。
锚点链接必须用 id，不能靠 class 或 name
浏览器只通过 document.getElementById() 查找目标，class="section2" 完全无效。必须写成：
-
<a href="#faq">常见问题</a>配合<div id="faq"></div> -
id值只能是字母开头，不能以数字起始（如id="1faq"在 Safari 中静默失效） - 避免空格、中文、特殊符号；推荐小写+短横线，比如
id="section-contact" - 确保全局唯一——重复的
id会让浏览器只认第一个，其余跳转全部失效
scroll-margin-top 解决 fixed 导航栏遮挡标题
点击后目标顶部被吸顶导航盖住，不是 bug，是浏览器默认行为：滚动基准永远是文档顶部，不自动减去 header 高度。
- 首选 CSS 方案：
h2[id] { scroll-margin-top: 60px; }（60px 替换为你的导航实际高度） - 该属性在 Chrome 61+、Firefox 68+、Safari 15.4+ 原生支持，无需 JS，不影响 SSR
- 别用
margin-top或padding-top撑开目标元素——会破坏布局流，响应式下极易错位 - 旧版 Safari 回退方案：
window.addEventListener('hashchange', () => window.scrollBy(0, -60))，但必须加节流
SPA 框架里 href="#xxx" 失效怎么办
Vue Router、React Router v6+ 等默认拦截所有 <a></a> 点击，把 #xxx 当作路由路径处理，原生锚点滚动被屏蔽。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- React（v6+）：必须用
createHashRouter，且<link to="#faq">不得被useNavigate覆盖 - Vue：改用
<router-link to="#faq" custom v-slot="{ navigate }">...</router-link>，或确保mode: 'hash'且未全局preventDefault - 通用兜底：删掉
href，用onclick触发document.getElementById('faq')?.scrollIntoView() - SSR 首屏注意：
hashchange不触发首次加载，需手动补：if (location.hash) handleHashChange()
动态内容加载后锚点不工作，怎么补救
JS 渲染的内容（比如 Vue v-if、React useState 切换区块）挂载前就点了链接，getElementById 返回 null，浏览器静默失败。
- 监听
hashchange+ 手动scrollIntoView是最可控方式： window.addEventListener('hashchange', handleHashChange)function handleHashChange() { const id = location.hash.slice(1); const el = document.getElementById(id); if (el && el.offsetParent !== null) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }- 记得首次加载也调用一次
handleHashChange()，否则example.com/#faq直接打开不会滚动 - 如果目标是懒加载图片或异步组件，加
el.offsetParent !== null判断是否可见、已挂载
真正麻烦的从来不是“怎么跳”，而是“为什么跳歪了”——id 合法性、DOM 存在性、CSS 滚动上下文、框架路由拦截，这四点漏一个，横向导航就形同虚设。
