js实现返回顶部操作-CFANZ编程社区

js实现返回顶部操作

返回顶部的 js 实现方法

设置 scrollTo(x,y)中的 x 和 y 的坐标值来滚动到页面的具体位置

<body>
    <!-- 返回按钮 -->
    <button id="btn">返回顶部</button>
    <!-- 内容区 -->
    <div class="content"></div>
    <script>
      //获取button
      var btn = document.querySelector("#btn");
      //设置按钮的默认属性为 隐藏
      btn.style.display = "none";
      //当滚动距离到达某一个值的时候,按钮会显示
      var Y = 0;
      window.onscroll = function () {
        Y = scrollY;
        if (Y > 400) {
          btn.style.display = "block";
        } else {
          btn.style.display = "none";
        }
      };
      //获取content
      var content = document.querySelector(".content");
      //向内容区中添加内容
      for (var i = 0; i < 100; i++) {
        //创建一个新的节点
        var h1 = document.createElement("h1");
        //设置h1的内容为 '易烊千玺yyds'
        h1.innerHTML = "易烊千玺yyds" + i;
        content.appendChild(h1);
      }
      //绑定点击事件

      btn.onclick = function () {
        //添加定时器,实现点击返回按钮后,会有缓冲的回到顶部
        var move = scrollY;
        var timer = setInterval(function () {
          //scrollY递减10
          move -= 10;
          if (move <= 0) {
            move = 0;
            scrollTo(0, move);
            //清除定时器
            clearInterval(timer);
          }
          scrollTo(0, move);
        }, 0.1);
      };
    </script>
  </body>

0 条评论