具体代码和逻辑如下

**重点看注释**

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        height: 5000px;
        background-image: linear-gradient(to bottom, blue, green, yellow);
      }
      div {
        width: 100px;
        height: 100px;
        background-color: #fff;
        border-radius: 15px;
        text-align: center;
        line-height: 100px;
        font-size: 44px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        /* div里面的内容，默认是隐藏的 */
        display: none;
      }
      div:hover {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div>↑</div>
  </body>
  <script>
    // window.onscroll意思滚动当前页面的时候，添加事件处理函数。
    // documentElement 是整个节点树的根节点root，即<html> 标签；
    // div里面的内容默认是隐藏的，滚动当前页面到一定位置的时候，才显示
    var divContent = document.querySelector("div");
    window.onscroll = function () {
      if (window.scrollY >= 800) {
        // div里面的内容就显示(改变display属性)
        divContent.style.display = "block";
      } else {
        divContent.style.display = "none";
      }
    };

    // 点击div里面的箭头，返回顶部,点击了开始执行间隔执行函数
    // 注意处理函数节流，点击之前，要清除前一次执行中的间隔执行函数
    // 定义一个全局变量接收间隔执行函数，方便多次使用
    var intervalResult = setInterval;
    divContent.onclick = function () {
      clearInterval(intervalResult);
      intervalResult = setInterval(() => {
        document.documentElement.scrollTop -= 10;
        if (document.documentElement.scrollTop <= 0) {
         // html滚动到顶部了，停止间隔执行函数
          clearInterval(intervalResult);
        }
      }, 50);
    };
  </script>
</html>

屏幕滚动（window.onscroll） 和 documentElment的使用

具体代码和逻辑如下

屏幕滚动（window.onscroll）和 documentElment的使用