最简单原生平滑滚动方案是用 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+）。关键就两步：
- 在
或上加style="scroll-behavior: smooth;" - 跳转链接用标准锚点：
@#@#@#@#@#@#@#@#@#@0，目标元素带对应id：<div id="section2">...</div> - 如果页面初始加载时也要平滑滚动到锚点（比如带
#about进来），得确保scroll-behavior在上设置，而不是只在
注意：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) 破坏锚点语义
有些人在链接里写 @#@#@#@#@#@#@#@#@#@1
event.preventDefault()
真正麻烦的是滚动过程中用户自己拖动滚动条，或者快速连点多个锚点——这时候浏览器会取消前一个动画并立即切到新目标，不需要额外处理，但得接受这种“中断即生效”的行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
