window.scrollTo() 和 scrollIntoView() 是实现精确垂直滚动定位的两种核心方案：前者直接控制视口滚动位置，兼容性好、支持像素级偏移和平滑动画；后者语义化强、自动处理复杂布局边界，但需确保元素已挂载。
用 window.scrollTo() 实现精确垂直滚动定位
按钮点击后跳转到页面某高度，本质是控制视口的垂直滚动位置，不是跳转新页面。window.scrollTo() 是最直接、兼容性好（IE10+）、无需依赖第三方库的方案。
常见错误是误用 location.href = "#xxx" 配合 ID 锚点——它依赖 DOM 结构、易受 CSS scroll-padding 或 position: sticky 干扰，且无法指定像素级偏移。
-
window.scrollTo(0, 200)：滚动到距页面顶部 200px 处（Y 轴坐标） - 第二个参数支持小数，比如
256.5，适合配合动态计算 - 加
{ behavior: "smooth" }可启用平滑滚动：window.scrollTo({ top: 200, behavior: "smooth" }) - 注意：若页面有固定头部（如 64px 高），需手动减去该值，否则目标内容会被遮挡
用 element.scrollIntoView() 定位到具体元素
当目标是滚动到某个 DOM 元素（比如一个 <section id="faq">）时，scrollIntoView() 更语义化、更鲁棒。
它自动处理父容器溢出、transform 偏移、direction: rtl 等边界情况，比手动算 offsetTop 更可靠。
立即学习“前端免费学习笔记（深入）”；
-
document.getElementById("faq").scrollIntoView()：默认滚动至顶部对齐 -
scrollIntoView({ block: "center", behavior: "smooth" })：居中显示，带动画 -
block: "nearest"适合移动端——只在必要时滚动，避免干扰用户当前视口 - 若元素未渲染完成（如异步加载内容），需确保调用前 DOM 已就绪，否则报错
Cannot read property 'scrollIntoView' of null
避免常见滚动失效问题
滚动没反应？大概率是以下三类原因：
- 页面根元素（
html或body）设置了overflow: hidden或height: 100vh，导致滚动容器不是document—— 此时需明确滚动目标容器，例如container.scrollTo(...) - CSS 中启用了
scroll-behavior: smooth但 JS 调用scrollTo时未传behavior，导致部分浏览器（如 Safari）不触发平滑效果 - 事件绑定在
<button>上却没加type="button"，表单内默认提交行为会刷新页面，覆盖滚动逻辑 - React/Vue 等框架中，元素 ref 尚未挂载就调用
scrollIntoView()，应放在useEffect或mounted生命周期里
滚动后微调偏移量（解决固定导航栏遮挡）
大多数网站有吸顶导航栏，直接滚动到目标元素顶部会导致内容被遮盖。不能靠 CSS scroll-margin-top 一劳永逸，因为 JS 滚动和 CSS 滚动行为可能不一致。
稳妥做法是在 JS 中动态计算并补偿：
const target = document.getElementById("contact");
const headerHeight = document.querySelector("header")?.offsetHeight || 64;
target.scrollIntoView({ block: "start" });
window.scrollBy(0, -headerHeight); // 补偿滚动
或者用 scrollTo 替代 scrollIntoView，直接算坐标：top: target.offsetTop - headerHeight。注意 offsetTop 是相对最近定位祖先的值，若父级有 transform，需改用 getBoundingClientRect().top + window.scrollY。
固定导航高度变化频繁时，别硬编码 64px；用 getComputedStyle(header).height 动态读取，或监听 resize 事件更新缓存值。
