https://eloquent-khapse-98a9d2.netlify.app/js/goTop.js

1// window.onload = function () {
2  let backbtn = document.getElementsByClassName('goTop')[0];
3  let timer = null; // 定义定时器
4  let isTop = true; // 中途可以停止返回顶部
5  // 刷新页面判断火箭是否显示
6  isshow();
7  // 窗口滚动判断火箭是否显示
8  window.addEventListener('scroll', function () {
9    if(isTop === false){
10      clearInterval(timer);//当isTop变成了false的时候就停止定时器
11      // backbtn.style.transform = 'translateY(0)';
12    }
13    isTop = false; //当鼠标再次滚动的时候，isTop就变成了false
14    isshow();
15  })
16  // 判断火箭显示与否
17  function isshow() {
18    // or > document.documentElement.clientHeight 大于一个屏幕
19    if (( document.documentElement.scrollTop || document.body.scrollTop ) > 100 ) {
20      backbtn.style.display = 'block';//如果滚条的高度大于窗口的高度，按钮就会显示出来，否则按钮消失
21      backbtn.style.transform = 'translateY(0)';
22    } else {
23      backbtn.style.transform = 'translateY(120px)';
24      // backbtn.style.display = 'none';
25    }
26  }
27  // 当鼠标移动到返回顶部按钮时，增加类fly
28  backbtn.onmouseover = function () {
29    this.classList.add('fly');
30  }
31  // 当鼠标移出的时候，删除类fly
32  backbtn.onmouseout = function () {
33    this.classList.remove('fly');
34  }
35  // 当点击小火箭，返货顶部，并且火箭上升
36  backbtn.onclick = function () {
37    timer = setInterval(() => {
38      isTop = true; //当点击按钮的时候，isTop为true，就不会清除定时器
39      let ostop = document.documentElement.scrollTop || document.body.scrollTop;
40      let ospeed = Math.ceil(ostop / 8);//先获取一个速度
41      document.documentElement.scrollTop = document.body.scrollTop = ostop-ospeed;//由快到慢的速度
42      // backbtn.style.transform = 'translateY(-1000px)'; // 打开这个注释，再给css一个动画效果，会看到火箭向上冲的效果
43      if ( ostop === 0 ) {
44        clearInterval(timer);
45        // backbtn.style.transform = 'translateY(0)';
46      }
47    },30);
48  }
49// }