(demo)回到顶部

点击按钮回到顶部

使用js实现一个回到顶部的小demo

前置知识：

css：

html,body {
      height:1000%;
      background-color: bisque;
    }
    .back {
      position: fixed;
      width: 70px;
      height: 25px;
      right: 50px;
      bottom: 80px;
    }

body：

  <button class="back" id="back">回到顶部</button>
  <script>
    let HTML = document.documentElement;
    let backToTop = document.getElementById('back');

    //1.当浏览器滚动条滚动的时候，进行验证；卷去的高度超过两屏幕时，就让button显示
    window.onscroll = (() => {
      let clientH = HTML.clientHeight;
      let scrollT = HTML.scrollTop;
      backToTop.style.display = scrollT >= clientH * 2 ? 'block' : 'none';
    })
    //2.点击回到顶部
    backToTop.onclick = (() => {
      HTML.scrollTop = 0;
    })
  </script>