window.scrollTo({ behavior: 'smooth' }) 默认不生效，因需显式传参且依赖环境：目标元素未挂载、滚动容器非document.documentElement、macOS启用“减少动画”、旧版Safari（≤15.4）不支持、或页面存在overflow: hidden遮罩层。
为什么直接用 window.scrollTo 会跳得生硬？
因为默认行为是瞬间滚动，浏览器不启用过渡动画。必须显式传入 { behavior: 'smooth' } 才触发 CSS 滚动平滑逻辑，但仅此还不够——很多场景下它根本没反应，比如目标元素还没渲染完成、或滚动容器不是 document.documentElement。
window.scrollTo 的 smooth 行为在哪些情况下会静默失败？
常见静默失败原因：
-
behavior: 'smooth'在部分旧版 Safari（ - 目标元素
offsetTop为 0（例如 DOM 尚未挂载、CSS 设置了display: none或visibility: hidden） - 滚动上下文不在
document，而是某个overflow: auto的容器内，此时需对容器调用scrollTo，而非window - 使用
scrollTo({ top, behavior: 'smooth' })时，top值为NaN或负数（如元素被position: absolute脱离文档流且未设置top）
如何写出真正可靠的平滑锚点跳转代码？
关键不是堆参数，而是加两层兜底：先查元素是否存在并可测量，再判断浏览器是否支持 smooth，最后 fallback 到 scrollTop 赋值。
示例（用于点击链接跳转 id 锚点）：
function smoothScrollToAnchor(hash) {
const id = hash.replace('#', '');
const el = document.getElementById(id);
if (!el) return;
<p>// 确保元素已渲染且有布局位置
const rect = el.getBoundingClientRect();
if (rect.top === 0 && rect.height === 0) {
requestAnimationFrame(() => smoothScrollToAnchor(hash));
return;
}</p><p>// 检查 smooth 是否可用（避免 Safari 15.3 及更早版本静默忽略）
const supportsSmooth = 'scrollBehavior' in document.documentElement.style;
if (supportsSmooth) {
window.scrollTo({
top: el.offsetTop,
behavior: 'smooth'
});
} else {
// fallback：手动滚动 + requestAnimationFrame 模拟平滑
const start = window.pageYOffset;
const end = el.offsetTop;
const duration = 300;
let startTime = null;</p><pre class="brush:php;toolbar:false;">function step(timestamp) {
if (!startTime) startTime = timestamp;
const progress = Math.min((timestamp - startTime) / duration, 1);
const easeOut = 1 - Math.pow(1 - progress, 3); // 简单 ease-out
window.scrollTo(0, start + (end - start) * easeOut);
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);} }
// 绑定点击事件（例如：跳转） document.addEventListener('click', e => { if (e.target.tagName === 'A' && e.target.getAttribute('href')?.startsWith('#')) { e.preventDefault(); smoothScrollToAnchor(e.target.getAttribute('href')); } });
移动端 iOS Safari 的特殊坑：fixed 导航栏遮挡怎么办？
iOS Safari 在启用 position: fixed 顶部导航栏时，el.offsetTop 计算的是相对于视口的位置，但 window.scrollTo 的 top 是相对于文档顶部的绝对偏移——结果就是滚动后元素被 fixed 栏盖住。
解决方法是手动减去导航栏高度（注意：不能硬写 60px）：
- 用
getComputedStyle(document.body).marginTop获取动态设置的占位高度（如果用了 padding-top hack） - 或更稳妥：给锚点元素加
scroll-margin-topCSS 属性，例如scroll-margin-top: 60px，现代浏览器（包括 iOS Safari 15.4+）会自动在 smooth 滚动中预留该间距 - 若需兼容老 iOS，可在 JS 中读取
el.scrollHeight后再减去预估的 fixed 高度（建议通过document.querySelector('.header').offsetHeight动态获取）
真正麻烦的从来不是加个 behavior: 'smooth'，而是滚动目标是否就位、滚动上下文是否正确、以及移动端 fixed 元素带来的视觉偏移——这些不处理，平滑只是假象。
