js控制滚动条缓慢滚动到顶部实现代码

实现网页滚动条缓慢滚动到顶部的效果，可以采用JavaScript来控制网页的滚动行为。以下是实现这个效果的完整攻略：

步骤一：创建HTML和CSS

首先，在HTML中创建一个按钮，用于触发滚动条滑动到顶部的事件：

<button onclick="scrollToTop()">Back to Top</button>

接着，使用CSS样式美化按钮：

button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

button:hover {
  background-color: #333;
}

步骤二：编写JavaScript控制滚动条滑动效果

接下来，我们需要编写一段JavaScript代码来控制滚动条缓慢滑动到顶部的效果。以下是一个示例代码实现：

function scrollToTop() {
  // 获取当前文档距离顶部的距离
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 0) {
    // 计算滚动距离，每次滚动一小段距离
    window.requestAnimationFrame(scrollToTop);
    document.documentElement.scrollTop = scrollTop - scrollTop / 8;
    document.body.scrollTop = scrollTop - scrollTop / 8;
  }
}

代码解析：

document.documentElement.scrollTop || document.body.scrollTop 用来获取当前文档距离顶部的距离。
window.requestAnimationFrame 用来刷新页面，以达到滚动效果。
document.documentElement.scrollTop 和 document.body.scrollTop 分别用来设置文档距离顶部的距离，实现滚动条滑动效果。

步骤三：添加滚动事件监听器

最后，我们需要添加一个滚动事件监听器，当用户向下滚动时显示按钮，当滚动到顶部时隐藏按钮。以下是示例代码：

window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var button = document.querySelector('button');

  if (scrollTop > 0) {
    button.style.display = 'block';
  } else {
    button.style.display = 'none';
  }
});

代码解析：