滚动到顶部 - Javascript

在网页设计和开发中，出现滚动条并不罕见，当然有时出现滚动条是很好的，但有时候会造成用户体验不佳，尤其是在需要用户反复滚动页面的时候。此时一个“滚动到顶部”按钮是非常有帮助的。

如何实现“滚动到顶部”按钮？

在纯粹的HTML和CSS环境下，我们可以选择使用锚点和CSS :target 伪类:

<a href="#top" class="back-to-top">返回顶部</a>
...
<h1 id="top">这里是顶部</h1>

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: none;
}
.back-to-top:target {
    display: block;
}

但如果需要向下滚动页面，我们就再也回不到顶部了。因此，使用JavaScript跳转到页面顶部是很常见的。

JavaScript实现方法：

1. 使用代码：

function scrollToTop() {
  window.scrollTo(0, 0);
}

2. 为“返回顶部”按钮绑定事件：

var btn = document.querySelector('.back-to-top');

btn.addEventListener('click', function(e){
  e.preventDefault();  // 阻止默认行为
  scrollToTop();  // 调用初始化函数
});

3. 添上平滑滚动的效果

要想平滑滚动到顶部，我们可以使用这段代码：

function scrollToTop() {
  var scrollTop = window.scrollY;  // 当前滚动距离
  if (scrollTop === 0) return;  // 已经到达顶部，直接返回
  var time = 500;  // 动画持续时间，单位毫秒
  var distance = -scrollTop;
  var interval = 16; // 间隔时间，单位毫秒，计算步数
  var count = time / interval; // 步数
  var step = distance / count; // 每次滚动距离
  var timer;
  function animate() {
    scrollTop += step;
    if (scrollTop <= 0) {  // 保证scrollTop最后一步不小于0
      clearInterval(timer);
      scrollTop = 0;  // 跳到顶部
    }
    window.scrollTo(0, scrollTop);
  }
  timer = setInterval(animate, interval);
}

这段代码的原理是： 每隔一段时间（interval）滚动距离（step），并重新计算当前的scrollTop值，直到scrollTop <= 0，停止滚动，即返回顶部。

完整代码

// 在body中添加以下代码
<a href="javascript:;" class="back-to-top">返回顶部</a>

<style>
.back-to-top {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  font-size: 16px;
  z-index: 999;
  padding: 10px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
}
</style>

<script>
(function() {
  'use strict';

  var btn = document.querySelector('.back-to-top');

  function scrollToTop() {
    var scrollTop = window.scrollY;
    if (scrollTop === 0) return;
    var time = 500; // 动画持续时间，单位毫秒
    var distance = -scrollTop;
    var interval = 16; // 间隔时间，单位毫秒，计算步数
    var count = time / interval;
    var step = distance / count;
    var timer;

    function animate() {
      scrollTop += step;
      if (scrollTop <= 0) {
        clearInterval(timer);
        scrollTop = 0;
      }
      window.scrollTo(0, scrollTop);
    }

    timer = setInterval(animate, interval);
  }

  // 绑定事件
  btn.addEventListener('click', function(e){
    e.preventDefault();
    scrollToTop();
  });

  // 监听滚动
  window.addEventListener('scroll', function() {
    var scrollTop = window.scrollY;
    if (scrollTop > 200) {
      btn.style.display = 'block';
    } else {
      btn.style.display = 'none';
    }
  });
})();
</script>

总结

在页面中添加一个返回顶部按钮可以让用户方便地回到页面顶部，提升了用户体验。我们可以利用JavaScript实现返回顶部的平滑滚动效果，通过计算滚动距离和时间间隔来实现渐进式的滚动。此外，我们还添加了滚动监听器，使“返回顶部”按钮只在页面向下滚动了一定距离时才显示出来。