纯JS实现平滑返回顶部

It is a secret

于 2021-08-26 10:12:56 发布

阅读量412

点赞数

文章标签： jquery javascript html5

本文链接：https://blog.youkuaiyun.com/zhangyuexin24/article/details/119925514

版权

这篇博客介绍了如何使用纯JavaScript实现类似jQuery动画效果的平滑返回顶部功能。通过设置定时器，逐步调整页面滚动位置，最终达到平滑滚动到顶部的效果。点击特定按钮时触发该方法，为网页增加流畅的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用纯js实现返回顶部，和jquery的animation差不多

let time = setInterval(function () {
 var osTop =
    document.documentElement.scrollTop || document.body.scrollTop;

  var speed = -osTop / 6;
  document.documentElement.scrollTop = document.body.scrollTop =
    osTop + speed;
  if (osTop == 0) {
    clearInterval(time);
  }
}, 30);