首页 | Blogs | 项目合集 | Bilibili↗
←返回 | 创建：2024-09-21 | 最后更新：2024-09-21

回顶动画，就是做出那种快速滚动回顶效果
具体实现就是不断地将目标滚动条的位置上拉，直到完全回顶

这里涉及到了「周期性」，即周期向上滚动一定数值
JS里面的周期函数用setInterval()实现，所以就有以下实现方法

const contentScroll = document.getElementById("要回顶的控件ID");
var toTop_interval_speed = -(contentScroll.scrollTop/(200));
var toTop_intervalID = setInterval(() => {
  contentScroll.scrollBy(0,toTop_interval_speed);
  if (contentScroll.scrollTop == 0) {clearInterval(toTop_intervalID);};
}, 1);

这里利用setInterval，每隔1ms就将指定控件滚动条向上移动一定距离
同时根据要滚动的距离除以特定值防止滚动过慢

需要注意有个问题没有解决：toTop_intervalID可能会被二次覆写，所以要做出二选一修改：

• 用户点击按钮后按钮即被暂时禁用，防止多次执行
• 在点击后若存在toTop_intervalID就不创建新定时任务了