JavaScript中BOM怎么用scrollTo和scrollBy实现带平滑过渡效果的锚点滚动-js教程-PHP中文网

javascript中bom的scrollto和scrollby本身不支持平滑滚动，但可通过behavior: 'smooth'选项实现原生平滑过渡；scrollto用于绝对定位滚动，scrollby用于相对位移滚动，均需传入{ behavior: 'smooth' }对象参数，现代浏览器广泛支持，旧版自动降级为即时滚动。

javascript中bom怎么用scrollto和scrollby实现带平滑过渡效果的锚点滚动

JavaScript中BOM的scrollTo和scrollBy本身不支持平滑滚动，但可通过behavior: 'smooth'选项（属于CSS滚动行为规范）实现原生平滑过渡效果，无需手动写动画逻辑。

scrollTo + smooth实现锚点平滑跳转

scrollTo用于滚动到指定坐标或元素位置。配合{ behavior: 'smooth' }即可启用浏览器原生平滑滚动：

滚动到页面顶部：window.scrollTo({ top: 0, behavior: 'smooth' });
滚动到某个元素顶部：const el = document.getElementById('section2'); el.scrollIntoView({ behavior: 'smooth' });（更推荐，语义清晰）
若必须用scrollTo定位元素：先获取元素距页面顶部距离，再传入top值：const top = el.offsetTop; window.scrollTo({ top, behavior: 'smooth' });

scrollBy + smooth实现相对位移平滑滚动

scrollBy以当前滚动位置为基准，偏移指定像素。同样支持behavior: 'smooth'：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

向下滚动300像素：window.scrollBy({ top: 300, behavior: 'smooth' });
向右滚动100像素（水平滚动需确保容器可横向滚动）：window.scrollBy({ left: 100, behavior: 'smooth' });
组合方向：window.scrollBy({ top: -200, left: 50, behavior: 'smooth' });

兼容性与降级处理

现代浏览器（Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+）均支持behavior: 'smooth'。旧版浏览器会自动忽略该选项，退化为即时滚动：

如需强制兼容老版本，可用Element.scrollIntoView()替代，它在多数旧浏览器中也支持{ behavior: 'smooth' }（注意Safari 15.4前不支持）
检测是否支持：if ('scrollBehavior' in document.documentElement.style) { /* 支持smooth */ }
不建议手写requestAnimationFrame模拟平滑滚动——除非有特殊缓动需求，否则原生方案更稳定、性能更好