scrollIntoView() 更可靠，因浏览器原生处理布局干扰；用 scroll-margin-top 解决 header 遮挡；需确保 DOM 就绪再调用，单页应用中应在路由守卫中手动触发。
scrollIntoView() 为什么比手动计算 offsetTop 更可靠
直接调用 element.scrollIntoView() 是最简且兼容性最好的方式，它由浏览器原生实现，自动处理了 fixed 定位、transform、overflow hidden 等布局干扰，而手动读取 offsetTop 在嵌套 transform 或 iframe 场景下极易失准。
常见错误现象：滚动后目标元素被 header 遮挡、或只滚到页面顶部而非元素可视区域中心。
- 加
{ block: 'start', behavior: 'smooth' }可控制对齐位置和动效（block取值还有'center'、'end'） - 若页面有 sticky header，推荐用
{ block: 'start', inline: 'nearest', behavior: 'smooth' }配合 CSSscroll-margin-top - IE 不支持
behavior: 'smooth'，需降级为behavior: 'auto'或引入 polyfill
scroll-margin-top 解决 header 遮挡问题
当页面顶部有固定定位的导航栏（position: fixed），直接 scrollIntoView() 会让元素紧贴视口顶部，被 header 盖住。此时不建议 JS 计算 header 高度再减去偏移 —— 响应式下高度会变，且容易和 CSS 逻辑脱节。
正确做法是用 CSS 原生属性 scroll-margin-top 声明“该元素滚动时，顶部要留出多少空间”：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.section {
scroll-margin-top: 80px; /* 和 header 高度一致 */
}这个值会直接影响 scrollIntoView() 的最终停靠位置，且响应式媒体查询中可动态调整，无需 JS 干预。
querySelector + scrollIntoView 组合使用要注意什么
很多场景是点击按钮跳转到页面内某个 id 元素，但 document.getElementById('xxx') 在元素尚未渲染完成时返回 null，导致调用失败。
- 确保 DOM 已就绪：放在
DOMContentLoaded事件里，或用document.querySelector('#xxx')替代（语法更灵活，支持 class、data-* 等） - 避免在 Vue/React 等框架中直接操作未挂载的 ref 元素；应在
mounted/useEffect中调用 - 如果目标元素是动态加载的（如分页内容），需在插入 DOM 后再调用
scrollIntoView()，不能依赖初始 HTML 结构
hashchange 事件自动滚动的边界情况
浏览器默认会在 URL hash 变化时自动滚动到对应 id 元素，但这个行为不可控、无动画、且无法拦截 —— 比如你希望 hash 变化时先执行一段逻辑再滚动，就不能依赖默认行为。
这时需要禁用默认滚动，并手动接管：
window.addEventListener('hashchange', (e) => {
e.preventDefault(); // 无效，hashchange 无法 prevent
// 正确做法：监听后立刻 scrollIntoView，并用 history.replaceState 阻止重复触发
const el = document.querySelector(location.hash);
if (el) el.scrollIntoView({ behavior: 'smooth' });
});真正容易被忽略的是：单页应用中，路由变化可能不触发 hashchange（比如 Vue Router 的 history 模式），此时必须在路由守卫中显式调用 scrollIntoView()。
