js实现返回顶部操作

最新推荐文章于 2023-03-30 23:35:36 发布

ice-index

最新推荐文章于 2023-03-30 23:35:36 发布

阅读量620

点赞数

分类专栏： dom 文章标签： javascript 动画

本文链接：https://blog.csdn.net/m0_65169658/article/details/123947846

版权

dom 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

返回顶部的 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>

ice-index

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现返回顶部操作

返回顶部的 js 实现方法设置 scrollTo(x,y)中的 x 和 y 的坐标值来滚动到页面的具体位置<body>  <button id="btn">返回顶部</button>  <div class="content"></div> <script> //获取button var bt
复制链接

扫一扫