js怎样实现平滑滚动效果 页面平滑滚动的4种实现方式分享

页面平滑滚动可通过多种方式实现。1.css scroll-behavior，优点是使用方便，缺点兼容性差且不可定制；2.js原生方法window.scrollto或element.scrollto，兼容性好且灵活控制，但需自行编写动画逻辑；3.第三方库如jquery.animate()、gsap等，功能丰富但需学习成本；4.性能优化方面需避免频繁操作dom、使用硬件加速、减少计算、优化图片加载及使用passive event listeners。每种方案各有优劣，根据需求选择。

页面平滑滚动，简单来说，就是让页面滚动的时候，不是一下子跳到目标位置，而是像丝绸一样慢慢滑过去，视觉效果更舒服。实现方式很多，各有优劣，选哪个看你的具体需求。

页面平滑滚动的4种实现方式分享

方案一：CSS scroll-behavior

最简单粗暴的方法，一行CSS搞定。

html {
  scroll-behavior: smooth;
}