JavaScript 实现平滑返回顶部功能 - 代码示例与解析

以下是使用 JavaScript 实现平滑返回顶部的代码：

HTML 代码：

<button id='btnTop' class='btnTop'>返回顶部</button>

CSS 代码：

.btnTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  cursor: pointer;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.btnTop:hover {
  background-color: #0062cc;
}

JavaScript 代码：

// 获取返回顶部按钮
const btnTop = document.getElementById('btnTop');

// 当页面滚动时显示或隐藏返回顶部按钮
window.onscroll = function() {
  if (document.documentElement.scrollTop > 100) {
    btnTop.style.display = 'block';
  } else {
    btnTop.style.display = 'none';
  }
};

// 平滑返回顶部
btnTop.onclick = function() {
  // 当前滚动高度
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  // 总共需要移动的距离
  let distance = scrollTop;

  // 计算总共需要多少步才能完成平滑滚动
  let stepNum = Math.ceil(distance / 100);

  // 计算每步需要移动的距离
  let stepValue = distance / stepNum;

  // 定义计时器
  let timer = setInterval(function() {
    // 当前滚动高度
    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    // 计算当前步数需要移动的距离
    let stepDistance = stepValue;

    // 如果当前步数需要移动的距离大于剩余需要移动的距离，则将当前步数需要移动的距离设置为剩余需要移动的距离
    if (stepDistance > distance) {
      stepDistance = distance;
    }

    // 计算剩余需要移动的距离
    distance -= stepDistance;

    // 计算当前滚动高度加上当前步数需要移动的距离
    let scrollTo = scrollTop - stepDistance;

    // 如果当前滚动高度加上当前步数需要移动的距离小于0，则将当前滚动高度设置为0
    if (scrollTo < 0) {
      scrollTo = 0;
    }

    // 平滑滚动到指定的位置
    document.documentElement.scrollTop = scrollTo;
    document.body.scrollTop = scrollTo;

    // 如果已经滚动到顶部，则清除计时器
    if (scrollTop == 0) {
      clearInterval(timer);
    }
  }, 10);
};

以上代码会在页面滚动时显示或隐藏返回顶部按钮，点击按钮时会平滑返回顶部。