JS实现页面平滑滚动的5种方法，超简单实用！

想要网页滚动不再生硬？本文为你精选5种JS实现页面平滑滚动的超简单方法，告别“Duang”一下的突兀感！从一行CSS代码`scroll-behavior: smooth`的极简方案，到原生JS `window.scrollTo()`的灵活控制，再到jQuery `animate()`的便捷应用，以及现代的`Element.scrollIntoView()`，甚至手写缓动函数定制极致体验，总有一款适合你。同时，本文还深入探讨了如何优化滚动速度、选择缓动函数，避免滚动劫持，并兼顾移动端性能，让你的网页滚动体验更上一层楼。无论你是想实现锚点链接、返回顶部、单页应用导航还是图片轮播，都能从中找到解决方案。让页面滚动如丝般顺滑，提升用户体验，就从这里开始！

页面平滑滚动可通过多种方式实现。1. 使用CSS的scroll-behavior: smooth属性实现最简单，但兼容性较差；2. 通过window.scrollTo()或window.scrollBy()结合requestAnimationFrame或setTimeout实现动画效果，灵活性高；3. 利用jQuery的animate()方法，便捷但增加依赖；4. 使用Element.scrollIntoView()方法，现代且用法简单；5. 手写缓动函数如easeInOutCubic，自由度最高但需要数学基础。优化方面需控制速度在300-800ms、选择合适缓动函数、避免滚动劫持及考虑移动端性能。应用场景包括锚点链接、返回顶部按钮、单页应用、内容导航及图片轮播。

页面平滑滚动，说白了，就是让页面滚动的时候别那么“Duang”一下就到位，而是像抹了油一样，缓缓地滑动到指定位置。实现方法还真不少，各有千秋，就看你喜欢哪种口味了。

解决方案（直接输出解决方案即可）

1. CSS scroll-behavior: smooth：最简单粗暴的方式

   

   一行CSS代码就能搞定，简直是懒人福音。直接在html或者body上加上scroll-behavior: smooth;，整个页面的所有锚点链接滚动就都平滑了。

   html {
     scroll-behavior: smooth;
   }

   简单是真简单，但是兼容性稍微差一点，老版本浏览器可能不支持。

   

2. window.scrollTo() 或 window.scrollBy()：JS原生方法

   这两个方法可以控制页面滚动到指定位置。想要平滑滚动，就得配合requestAnimationFrame或者setTimeout来实现动画效果。

   function scrollToSmoothly(pos, time) {
     let currentPos = window.pageYOffset;
     let start = null;
   
     window.requestAnimationFrame(function step(currentTime) {
       start = start || currentTime;
       let progress = currentTime - start;
       let percentage = Math.min(progress / time, 1);
   
       window.scrollTo(0, currentPos + (pos - currentPos) * percentage);
   
       if (progress < time) {
         window.requestAnimationFrame(step);
       }
     });
   }
   
   // 使用示例：滚动到页面顶部
   scrollToSmoothly(0, 500); // 500ms内滚动到顶部

   这个方法比较灵活，可以自定义滚动速度和动画效果。

3. 使用第三方库：例如 jQuery 的 animate()

   如果你已经用了 jQuery，那就可以直接用它的animate()方法来实现平滑滚动。

   $("html, body").animate(
     {
       scrollTop: $("#target").offset().top,
     },
     1000
   ); // 1000ms内滚动到#target元素的位置

   方便快捷，但会增加页面依赖，如果只是为了一个滚动效果引入整个 jQuery，就有点得不偿失了。

4. 使用 Element.scrollIntoView()：更现代的方式

   scrollIntoView()方法可以让指定的元素滚动到可视区域。可以传入一个behavior参数来控制滚动行为。

   document.getElementById("target").scrollIntoView({
     behavior: "smooth",
     block: "start", // 或者 'end', 'center', 'nearest'
   });

   这个方法相对比较新，兼容性也还不错，而且用法简单。

5. 自己手写缓动函数：终极自定义方案

如果你对滚动效果有极致的要求，可以自己手写缓动函数，比如使用贝塞尔曲线来控制滚动速度。

   function easeInOutCubic(t) {
    return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
   }

   function scrollToSmoothlyCustomEase(pos, time, easingFunction) {
      let currentPos = window.pageYOffset;
      let start = null;

      window.requestAnimationFrame(function step(currentTime) {
        start = start || currentTime;
        let progress = currentTime - start;
        let percentage = Math.min(progress / time, 1);

        // 使用自定义缓动函数
        let easedPercentage = easingFunction(percentage);

        window.scrollTo(0, currentPos + (pos - currentPos) * easedPercentage);

        if (progress < time) {
          window.requestAnimationFrame(step);
        }
      });
   }

   // 使用示例：
   scrollToSmoothlyCustomEase(document.getElementById("target").offsetTop, 800, easeInOutCubic);

这种方式的自由度最高，但是也需要一定的数学基础和耐心。

如何优化平滑滚动效果，提升用户体验？

平滑滚动虽然能提升用户体验，但如果用不好，反而会适得其反。比如滚动速度太慢，用户会觉得卡顿；滚动速度太快，又失去了平滑的意义。所以，优化滚动效果很重要。

1. 控制滚动速度： 滚动速度要适中，一般来说，300-800ms的滚动时间比较合适。可以根据页面内容长度和用户习惯来调整。

2. 选择合适的缓动函数： 缓动函数决定了滚动的加速度和减速度。常用的缓动函数有ease-in、ease-out、ease-in-out等。可以根据实际情况选择合适的缓动函数，或者自定义缓动函数。

3. 避免滚动劫持： 滚动劫持是指通过JS代码完全控制页面的滚动行为。虽然可以实现一些炫酷的效果，但会破坏用户的滚动习惯，影响用户体验。尽量避免使用滚动劫持，除非有非常特殊的需要。

4. 考虑移动端性能： 在移动端，性能是关键。尽量避免使用复杂的JS动画，可以使用CSS3动画来提升性能。另外，要注意减少重绘和重排，避免引起页面卡顿。

平滑滚动在实际项目中的应用场景有哪些？

平滑滚动的应用场景非常广泛，几乎所有的网站都可以用到。

1. 锚点链接： 这是最常见的应用场景。通过平滑滚动，可以让用户在点击锚点链接时，页面平滑地滚动到指定位置，而不是直接跳过去。

2. 返回顶部按钮： 几乎所有的网站都有返回顶部按钮。通过平滑滚动，可以让用户点击按钮后，页面平滑地滚动到顶部，而不是瞬间回到顶部。

3. 单页应用（SPA）： 在单页应用中，页面内容是通过JS动态加载的。通过平滑滚动，可以实现页面之间的平滑切换，提升用户体验。

4. 内容导航： 在一些内容较长的页面中，可以使用内容导航来帮助用户快速定位到感兴趣的内容。通过平滑滚动，可以让用户点击导航链接后，页面平滑地滚动到对应的内容区域。

5. 图片轮播： 在图片轮播中，可以使用平滑滚动来实现图片之间的平滑切换，增加视觉效果。

好了，本文到此结束，带大家了解了《JS实现页面平滑滚动的5种方法，超简单实用！》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！