回到顶部的按钮

实现按钮一键回到顶部

• 1方法一的话：就是用标签的的描点跳转，这个方法很简单，可以在顶部的一个标签里设置一个id值，比如 id=“top”;
• 我们可以通过position的方法定位到`把回到顶部的按钮定位到右下角

<div class="toTop">
    <a href="#top">回到顶部</a>
  </div>
  
 - <style>
    .toTop{
        width: 44px;
        padding:3px 0;
        background:#999;
        text-align: center;
        position: fixed;
        right: 50px;
        bottom: 100px;
        color: #fff;
        cursor: pointer;
        display: none;     /*   这里在第一种方法不用*/      
    }
  </style>

上面是通过标签实现。
2一般我们会通过js通过sctrollY窗口高度来实现
html+css我们还是引用上面的代码
下面直接上js的代码

在这里
  <script>
    var toTop = document.querySelector(".toTop")   //获得div元素
    toTop.addEventListener('click',function(){   //绑定一个是点击事件
      var stop = setInterval(function(){   //设置一个定时器每5毫秒执行一次函数
        scrollY-=20;
        window.scrollTo(0,scrollY)   //回到设置的高度，第一个值表示x轴，第二个值表示y轴
        if(scrollY<0){                  //判断小于
          clearInterval(stop)   //停止计时器
        }
      },5)
    })
    window.onscroll = function(){  //滚动条事件
      if(scrollY>300){                  //判断高度是否大于300
        toTop.style.display = "block"   //设置样式显示
      }else{
        toTop.style.display = "none"  //设置样式隐藏
      }
    }
  </script>