最简单原生平滑滚动方案是用 scrollIntoView 配合 CSS scroll-behavior：1. 在 html 或 body 上设 style="scroll-behavior: smooth;"；2. 用标准锚点链接 href="#id" 跳转，目标元素带对应 id。
用 scrollIntoView 配合 CSS scroll-behavior 最简单
原生支持平滑滚动，不用写 JS 动画逻辑，兼容性也够用（Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+）。关键就两步：
- 在
<html>或<body>上加style="scroll-behavior: smooth;" - 跳转链接用标准锚点：
<a href="#section2">跳到第二节</a>，目标元素带对应id：<div id="section2">... - 如果页面初始加载时也要平滑滚动到锚点（比如带
#about进来），得确保scroll-behavior在<html>上设置，而不是只在<body>
注意：Safari 旧版本（scroll-behavior，会退化为瞬时跳转，但不会报错。
需要更精细控制时用 Element.scrollTo 或 window.scrollTo
比如要偏移顶部 80px（避开固定导航栏）、或动态计算滚动位置、或绑定按钮点击事件，就得手动调用滚动 API。
-
document.getElementById('section3').scrollTo({ top: 0, behavior: 'smooth' });—— 滚动到某元素顶部 -
window.scrollTo({ top: 200, behavior: 'smooth' });—— 滚动到绝对 Y 坐标 - 常用偏移写法：
const target = document.getElementById('faq'); const offsetTop = target.offsetTop - 80; window.scrollTo({ top: offsetTop, behavior: 'smooth' }); - 别用
scrollTop+setTimeout自己实现缓动，既难调又容易和浏览器原生滚动冲突
锚点失效或跳转不准的常见原因
页面内跳转动画没反应，大概率不是动画本身问题，而是锚点没对上：
立即学习“前端免费学习笔记（深入）”；
- 目标元素没有
id，或id值和href中的不一致（大小写、空格、特殊字符都算不同） - 目标元素是动态插入的（比如 Vue/React 渲染后才存在），但链接点击时它还没挂载，
scrollIntoView找不到节点 - CSS 设置了
position: fixed/absolute或transform，导致元素脱离文档流，offsetTop计算失真 - 用了
display: none或visibility: hidden隐藏目标区域，scrollIntoView无法获取尺寸，建议改用opacity: 0; height: 0; overflow: hidden;
不要用 target="_self" 或 javascript:void(0) 破坏锚点语义
有些人在链接里写 <a href="javascript:void(0)" onclick="jumpTo('section2')">，这会让浏览器失去原生锚点能力，scroll-behavior 和前进/后退记录都会失效。
- 保留语义化锚点：
<a href="#contact">联系我们</a> - 如果必须拦截默认行为（比如要做加载状态），记得手动触发滚动后再
event.preventDefault() - 历史记录很重要：用户点后退键时，希望回到上一个锚点位置，而不是整个页面刷新
真正麻烦的是滚动过程中用户自己拖动滚动条，或者快速连点多个锚点——这时候浏览器会取消前一个动画并立即切到新目标，不需要额外处理，但得接受这种“中断即生效”的行为。
