【JavaScript】- 点击返回顶部

 

css：

 body {
        height: 8000px;
        background-image: linear-gradient(red, blue);
      }

      a {
        color: #fff;
      }

      .actGotop {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 150px;
        height: 195px;
        display: none;
        z-index: 100;
      }

      .actGotop a,
      .actGotop a:link {
        width: 150px;
        height: 195px;
        display: inline-block;
        background: url(images/gotop.png) no-repeat;
        outline: none;
      }

      .actGotop a:hover {
        width: 150px;
        height: 195px;
        background: url(images/gotop.gif) no-repeat;
        outline: none;
      }

html：

 <div class="actGotop"><a href="javascript:;" title="Top"></a></div>

js：

window.addEventListener('load', function() {
        // 获取元素
        let actGotop = document.querySelector('.actGotop')
        // 为小火箭添加单击事件
        actGotop.addEventListener('click', function() {
          // 回到顶部
          let top = document.documentElement.scrollTop
          let timeId = setInterval(function() {
            top -= 40
            if (top < 0) {
              top = 0
              clearInterval(timeId)
            }
            document.documentElement.scrollTop = top
          }, 1)
        })

        // 监听页面滚动
        window.addEventListener('scroll', function() {
          // 获取页面滚动出屏幕的距离
          let top = document.documentElement.scrollTop
          // 判断卷出的距离是否大于 2000
          if (top >= 2000) {
            // 让小火箭出现
            actGotop.style.display = 'block'
          } else {
            // 让小火箭隐藏
            actGotop.style.display = 'none'
          }
        })
      })