如何用纯js实现返回页面顶部功能

  function scrollToTop({elem, speed = 5, top = 0, showDistance = 500, callback}) {

  // 获取返回顶部按钮

  let backToTopButton = document.getElementById(elem);

  // 当页面滚动时显示或隐藏返回顶部按钮

  window.onscroll = function() {

  // 获取当前滚动的位置

  let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;

  // 判断是否超过设置的显示距离,超过就显示,否则就隐藏

  if (currentScroll > showDistance) {

  backToTopButton.style.display = "block";

  } else {

  backToTopButton.style.display = "none";

  }

  };

  // 平滑滚动到顶部

  backToTopButton.addEventListener("click", function() {

  // 获取当前滚动的位置

  let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;

  // 如果当前不在顶部,则开始滚动动画

  if (currentScroll > top) {

  window.requestAnimationFrame(smoothScroll); // 运行动画

  } else {

  // 到达指定位置,执行回调函数

  callback && callback();

  }

  });

  // 滚动函数

  function smoothScroll() {

  // 获取当前滚动的位置

  let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;

  // 如果当前不在顶部,则开始滚动动画

  if (currentScroll > top) {

  window.requestAnimationFrame(smoothScroll);

  window.scrollTo(0, currentScroll - (currentScroll / speed)); // 控制滚动速度

  }

  }

  }