默认不平滑是因为浏览器滚动行为默认为“instant”，需显式设置behavior: 'smooth'；正确写法是window.scrollTo({top: 0, left: 0, behavior: 'smooth'})，旧版Safari需用CSS scroll-behavior或JavaScript模拟。
scrollTo 为什么默认不平滑
直接调用 window.scrollTo(0, 0) 会瞬间跳转，因为浏览器默认行为是“instant”滚动。平滑效果必须显式声明，否则无论页面多长、DOM 多复杂，都不会有过渡动画。
关键点在于：平滑不是可选附加功能，而是需主动启用的滚动行为（behavior），且仅在支持该选项的浏览器中生效（Chrome 61+、Firefox 68+、Safari 15.4+）。
正确写法：必须传入 options 对象
不能只传坐标，必须用对象形式指定 top、left 和 behavior：
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});常见错误写法包括：
-
window.scrollTo(0, 0, 'smooth')—— 第三个参数被忽略，等价于 instant -
window.scrollTo({ top: 0 }, { behavior: 'smooth' })—— 只传一个对象，第二个被丢弃 -
element.scrollTo(...)混用 —— 这是元素级滚动，和window无关
兼容性 fallback 怎么做
如果目标用户包含旧版 Safari（behavior: 'smooth' 会被静默忽略，仍走 instant。需要检测是否真正生效：
更稳妥的做法是降级为 scrollIntoView 或 CSS scroll-behavior 配合 JS 判断：
// 检查是否支持 smooth 选项
if ('scrollBehavior' in document.documentElement.style) {
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
// 降级：用 requestAnimationFrame 模拟缓动（简单线性也可）
const start = window.pageYOffset;
const duration = 300;
let startTime = null;
<p>const animateScroll = (timestamp) => {
if (!startTime) startTime = timestamp;
const progress = Math.min((timestamp - startTime) / duration, 1);
window.scrollTo(0, start * (1 - progress));
if (progress < 1) requestAnimationFrame(animateScroll);
};
requestAnimationFrame(animateScroll);
}和 scrollIntoView 的关键区别
有人误用 document.body.scrollIntoView({ behavior: 'smooth' }) 实现置顶，这看似可行，但存在两个隐患：
- 若
<body>有margin或padding，实际滚动位置可能偏移，不一定精确到 viewport 顶部 - 部分安卓 WebView 中
scrollIntoView行为不稳定，尤其配合position: fixed元素时容易卡顿或跳变 -
window.scrollTo是唯一能 100% 精确控制到(0, 0)坐标的 API
所以置顶场景下，优先用 window.scrollTo，而不是借道 scrollIntoView。
平滑滚动看似简单，但行为是否触发、是否真正平滑、是否跨端一致，全取决于那一行 behavior: 'smooth' 是否被正确包裹在对象里，以及有没有兜底逻辑应对不支持的环境。
