JS实现页面返回顶部

页面返回顶部是在Web中常见的效果，在一个很长的页面中，页面返回顶部按钮可以方便用户回到页面的顶部，增强用户体验。
这里我要实现的效果图如下：
这里写图片描述
其html代码如下：

<body style="height: 1800px;">
<div class="to-top"></div>
</body>

css代码如下：

.to-top {
  width: 37px;
  height: 37px;
  background: url("to-top.png") no-repeat;
  cursor: pointer;
  position: absolute;
  right: 0;
}

.to-top:hover {
  background: url("to-top.png") -38px no-repeat;
}

这里是我用到的资源图片：
这里写图片描述
实现页面返回顶部的逻辑也很简单：

返回顶部的按钮要随着页面的滚动而保持在页面的右下角；
点击返回顶部的按钮，控制滚动条回到页面顶部，即控制滚动条的滚动距离为0。

其js代码如下：

window.onload = function () {

  var oToTop = document.querySelector('.to-top');
  /**
   * 元素可视区高度
   * @type {number}
   */
  var viewHeight = document.documentElement.clientHeight;

  /**
   * 获取元素垂直滚动的像素数
   * document.documentElement.scrollTop 适用IE/Firefox浏览器
   * document.body.scrollTop            适用Safari/Chrome浏览器
   * @type {number}
   */
  var heightTop = document.documentElement.scrollTop || document.body.scrollTop;

  oToTop.style.top = heightTop + viewHeight - oToTop.offsetHeight + 'px';
  window.onscroll = function () {
    scroll()
  };

  function scroll() {
    /**
     * 元素可视区高度
     * @type {number}
     */
    var viewHeight = document.documentElement.clientHeight;

    /**
     * 获取元素垂直滚动的像素数
     * document.documentElement.scrollTop 适用IE/Firefox浏览器
     * document.body.scrollTop            适用Safari/Chrome浏览器
     * @type {number}
     */
    var heightTop = document.documentElement.scrollTop || document.body.scrollTop;

    oToTop.style.top = viewHeight + heightTop - oToTop.offsetHeight + 'px';
  }

  oToTop.addEventListener('click', function () {
    var iSpeed = 0;

    clearInterval(iTimer);
    var iTimer = setInterval(function () {
      var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
      console.log(heightTop);
      iSpeed = Math.floor((0 - heightTop) / 8); // 当速度小于0时 要向下取整才能够准确的到达目标值
      document.body.scrollTop = heightTop + iSpeed;
      if (document.body.scrollTop <= 0) {
        clearInterval(iTimer);
      }
    }, 30);
  }, false)

}

这里我们需要注意的是document.body.clientHeight与document.documentElement.clientHeight的区别，前者是获取body元素高度，后者是获取元素可视区高度。其中这里我们也发现滚动条有缓动的效果，就是随着滚动条靠近页面的顶部，滚动条运动的速度越来越慢，这里主要是利用了js的setInterval方法来实现的。还有我们需要认识到一个本质：当document.body.scrollTop的值为0时，滚动条也就在顶部了。

JS实现页面返回顶部

猜你喜欢