原生 JavaScript 的 scrollIntoView({ behavior: 'smooth' }) 是最轻量且兼容性好的平滑滚动方案，需显式配置 behavior 和 block 参数，并确保元素存在；CSS 的 scroll-behavior: smooth 仅对 href 锚点生效，iOS 旧版 Safari 需降级处理。
点击按钮触发 scrollIntoView 平滑滚动
直接用原生 JavaScript 调用 scrollIntoView 是最轻量、兼容性好（Chrome 61+、Firefox 60+、Safari 15.4+）的方案，不需要依赖锚点链接或 hash 变化。
常见错误是只写 element.scrollIntoView()，结果滚动生硬；必须显式传入行为配置：
-
behavior: 'smooth'是关键，缺了它就是默认瞬时滚动 -
block: 'start'控制垂直对齐（'center'或'end'也可按需选） - 别忘了先用
document.getElementById或querySelector拿到目标元素，否则报Cannot read property 'scrollIntoView' of null
示例：
document.querySelector('#scroll-btn').addEventListener('click', () => {
document.querySelector('#section2').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
});
用 href="#id" 配合 scroll-behavior: smooth
这是纯 CSS 方案，适合已有锚点链接的页面，但有明显限制：它只对通过 href="#xxx" 触发的跳转生效，不响应 JS 的 location.hash 设置或手动点击非 a 元素。
关键样式必须写在 :root 或 html 上，写在 body 无效：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
:root { scroll-behavior: smooth; }—— 推荐，全局生效 - 目标元素（如
<div id="section2">）不需要额外 class 或样式，但要有唯一id - 如果页面启用了
overflow-x: hidden在html或body，可能抑制平滑效果，建议移除或改用overflow: auto
避免 hashchange 与 scrollIntoView 冲突
混合使用锚点跳转和 JS 滚动时容易出问题：比如用户点链接触发 hash 变化，同时 JS 又调用 scrollIntoView，导致两次滚动或偏移错乱。
典型症状是滚动目标位置偏差、滚动中断、或控制台出现 Unable to preventDefault inside passive event listener（尤其在移动端）：
- 禁用默认行为仅在必要时做：
event.preventDefault()加在click处理里，而不是hashchange里 - 监听
hashchange后再滚动，要加防抖或判断当前 hash 是否真对应目标元素，否则页面加载时也会触发一次 - 更稳妥的做法是统一入口：所有滚动都走 JS
scrollIntoView，把<a href="#section2">改成<button data-target="section2">，完全绕开 hash
移动端 Safari 中 scroll-behavior 不生效怎么办
iOS 15.4+ 才支持 scroll-behavior: smooth，旧版 Safari（包括大部分 iOS 用户）会直接忽略该声明，回退为瞬时滚动。
这不是 bug，是标准支持滞后，不能靠 polyfill 完全修复：
- 检测是否支持：
'scrollBehavior' in document.documentElement.style - 不支持时降级用 JS
scrollIntoView（注意 Safari 对behavior: 'smooth'的支持比 CSS 更早，iOS 13.4+ 就可用） - 避免在 iOS 上对
body设height: 100vh+overflow: hidden，这会让scrollIntoView失效
真正难处理的是 fixed header 高度动态变化时的偏移计算——这时候光靠 scrollIntoView 不够，得手动加 scroll-margin-top 或 JS 补偿，这个细节很容易被忽略。
