锚点链接失效主因是目标元素未被浏览器“看见”，需确认id存在且合法、DOM已加载；滚动遮挡用scroll-margin-top解决；SPA中需绕过路由拦截；首次加载带hash须手动触发滚动。
锚点链接失效，八成不是写法错，而是目标元素没被“看见”
浏览器对 href="#xxx" 非常宽容：哪怕页面里压根没有 id="xxx" 的元素，它也不会报错，只是不动。所以静默失败才是常态。
必须确认三件事：
- 目标元素确实带
id属性（不是class，也不是已废弃的name） -
id值全小写、无空格、无中文、不以数字开头（如id="api-reference"✅，id="1section"❌） - 点击链接时，该元素已在 DOM 中 —— 动态渲染的内容（Vue/React 组件、AJAX 插入块）若还没挂载，原生锚点就失效
快速验证：在开发者工具中执行 document.getElementById("faq")，返回值必须是非 null 且唯一。如果返回多个同名 id，浏览器只取第一个。
滚动到锚点后标题被 fixed 导航栏遮住怎么办
这是最常被忽略的视觉问题。浏览器滚动以文档顶部为基准，而 position: fixed 的导航栏会盖住目标元素上半部分。
立即学习“前端免费学习笔记（深入）”；
首选纯 CSS 方案，轻量且 SSR 友好：
- 给目标元素加
scroll-margin-top，例如：h2[id] { scroll-margin-top: 60px; }（60px 对应导航栏高度） - 该属性在 Chrome 61+、Firefox 68+、Safari 15.4+ 原生支持；旧版 Safari 需回退 JS
- 别用
margin-top或padding-top单独撑开 —— 容易破坏布局流，尤其在响应式下
若需兼容老 Safari，可用 JS 微调，但要防抖：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
window.addEventListener('hashchange', () => {
setTimeout(() => window.scrollBy(0, -60), 10);
});
单页应用（SPA）里 href="#xxx" 点击没反应
Vue Router、React Router v6+ 等默认拦截所有 <a> 跳转，把 #faq 当作路由路径处理，而非原生锚点行为。结果就是地址栏变、页面不动，甚至触发 404。
绕过路由系统的实操方式：
- Vue：加
target="_self"强制走原生逻辑，或用<router-link to="#faq" custom v-slot="{ navigate }"><a @click="navigate">跳转</a></router-link> - React（v6+）：必须使用
createHashRouter，并确保没在全局onClick中调用event.preventDefault() - 通用兜底：删掉
href，改用onclick触发document.querySelector(location.hash)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
注意：SSR 场景下，服务端无法执行滚动。首次加载带 hash 的 URL（如 example.com/#faq）必须在客户端手动补一次解析和滚动。
监听 hashchange 并响应跳转，为什么首次加载不触发
hashchange 事件不会在页面初始加载带 hash 的 URL 时触发 —— 这是规范行为，但极易被忽略，导致首屏不滚动。
必须拆成两步处理：
- 首次加载主动检查：
if (location.hash) { handleHashChange(); } - 后续变更再监听：
window.addEventListener('hashchange', handleHashChange)
handleHashChange 函数里务必先做存在性判断：
function handleHashChange() {
const target = document.querySelector(location.hash);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
否则 scrollIntoView 在 null 上调用会直接报错。另外，IE8/9 中 hashchange 不支持冒泡，且必须绑定到 window，不能用 document。
