加 scroll-behavior: smooth 即可实现锚点平滑跳转，需作用于 html 或 body；queryselector 找不到锚点常因 id 不规范、大小写错误或元素未加载；spa 需手动监听 hashchange 或路由钩子并调用 scrollintoview。
锚点跳转默认不平滑？加 scroll-behavior: smooth 就够了
现代浏览器（Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+）原生支持平滑滚动，无需插件。只要在 html 或 body 上设置 CSS 属性即可生效：
html {
scroll-behavior: smooth;
}
注意：该声明必须作用于根元素或 body，写在 div 或其他容器上无效；若页面已有 body { overflow: hidden } 或强制重置滚动的 JS，会覆盖该行为。
常见错误现象：scroll-behavior 设了但没反应——大概率是父级容器有 overflow: auto/scroll 且自身可滚动，此时滚动目标不是 body，而是那个容器，需把 scroll-behavior: smooth 移到对应容器上。
querySelector 找不到锚点？检查 id 和大小写、空格、特殊字符
原生锚点跳转依赖 id 匹配，但 JS 手动滚动（如监听导航点击后调用 element.scrollIntoView）时，document.getElementById 或 document.querySelector 查不到目标，往往是因为：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
id值含空格、中文或以数字开头（如id="2nd-section"），虽 HTML 允许，但部分老版本 Safari 或 JS 查询会失败；建议只用字母、下划线、短横线，且以字母开头 - 大小写不一致：HTML 中
id="About"，JS 却写querySelector("#about") - 目标元素尚未加载完成：比如内容由 JS 动态注入，但滚动逻辑执行太早；可监听
DOMContentLoaded或用setTimeout延迟，更稳妥的是用MutationObserver监听元素挂载
需要兼容 IE 或旧版 Safari？用 scrollIntoView + behavior: "smooth" 回退方案
scrollIntoView({ behavior: "smooth" }) 支持度略低于 scroll-behavior（IE 完全不支持，iOS Safari 15.4 前也不支持），但它能精准控制任意元素滚动，适合做自定义导航逻辑：
document.querySelectorAll('nav a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').slice(1);
const targetEl = document.getElementById(targetId);
if (targetEl) {
targetEl.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
关键细节：
- 必须加
e.preventDefault()，否则会触发默认锚点跳转（造成两次滚动） -
block: 'start'防止目标被固定头部遮挡；若页面有position: sticky导航栏，建议配合scroll-margin-top（如#about { scroll-margin-top: 80px; }） - IE 下
behavior: "smooth"报错，可用try/catch降级为behavior: "auto"，或引入轻量 polyfill（如smooth-scroll-polyfill）
单页应用（SPA）里路由变化不触发滚动？要手动监听 hashchange 或路由钩子
Vue Router、React Router 等 SPA 框架默认不处理锚点滚动，location.hash 变化不会自动平滑滚动到对应元素。需主动监听：
- 原生场景：绑定
window.addEventListener('hashchange', ...)，解析新location.hash并调用scrollIntoView - Vue Router：在
router.afterEach钩子中处理，注意区分首次加载（from.fullPath === '/'）和 hash 切换 - React Router v6：用
useEffect监听location.hash变化，避免重复执行（加防抖或比对上一次 hash）
容易忽略的一点：SPA 中用户可能直接访问带 hash 的 URL（如 index.html#contact），此时页面加载完成前 hash 已存在，需在初始化阶段也执行一次滚动定位，不能只等事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
