纯 JavaScript 实现页面滚动到顶部

最后更新： 2018-01-05

阅读次数： 次

许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

在几个月前，我就已经把这个功能实现了，之前这个效果是由 HTML、css、JavaScript 一块儿写的，并且当时留下了一个问题：如何禁止短时间内多次点击 div 滑块儿，防止出现页面出现闪动情况。

利用昨天晚上的一个多小时把这个重写了一下，并且把 HTML 和 css 都直接在 JavaScript 中进行表达。

实现思路

• 首先向页面插入一个 div 节点，并设定好相应的样式
• 然后使用 js 监听 scroll 事件，在页面滚动到某个位置时，显示出向上滚动的按钮
• 点击按钮，即可滚动到页面最顶部

源代码

(function() {
  // 使用JavaScript为页面添加返回顶部滑块儿
  var div = document.createElement("div");

  div.id = "to-top";
  div.style.cssText = ` display: none;      
                        position: fixed;  
                        bottom: 20px;  
                        right: 20px;  
                        z-index: 100;  
                        cursor: pointer;  
                        width: 40px;  
                        height: 40px;  
                        line-height: 40px;  
                        border-radius: 3px;  
                        background: #666;  
                        text-align: center;  
                        font-size: 25px;  
                        `;

  // 为了方便，我这里直接使用一个 HTML实体 来表示向上箭头
  div.innerHTML = "↑";
  document.body.appendChild(div);

  // 返回顶部 动画实现
  // animationToTop() 默认有2个参数
  // step 设置滚动函数中每次向上滚动的像素值，默认为 5像素
  // delay 设置每次调用滚动函数的时间间隔，默认为 20ms
  function animationToTop(step = 5, delay = 20) {
    var intervalID;
    var length = window.scrollY;

    intervalID = window.setInterval(roll.bind(this), delay); // 计时器

    // 向上滚动函数
    function roll() {
      window.scrollTo(0, (length -= step++));

      if (length <= 0) {
        clearInterval(intervalID);

        this.style.pointerEvents = "auto";
      }
    }
  }

  // 添加点击事件
  var top = document.getElementById("to-top");

  top.onclick = function() {
    this.style.pointerEvents = "none";

    animationToTop.call(this);
  };

  // 在合适的时间 显示 返回顶部按钮
  document.addEventListener("scroll", function() {
    var top = document.getElementById("to-top");

    if (window.scrollY < document.body.clientHeight / 4) {
      top.style.display = "none";
    } else {
      top.style.display = "block";
    }
    top = null;
  });
})();

收获

• 用 ` 字符可以用来定义多行字符串（ES6）
• 通过设置元素的 css 属性为：pointer-events: none，可以为元素取消鼠标事件。

【MDN】pointer-events