JavaScript implementation of the back to top button example

.backtotop {
    position: fixed;
    bottom: 80px;
    right: 80px;
    width: 80px;
    height: 80px;
    background-color: #ccc;
    font-size: 20px;
    text-align: center;
    padding-top: 12px;
    box-sizing: border-box;
    cursor: pointer;
    color: #000;
    /* Hide the button first */
    display: none;
  } 

<a href="javascript:;" class="backtotop" id="backtotop">Back to<br>Top</a>

a {
    text-decoration: none;
  }

  body {
    height: 5000px;
  }

  .backtotop {
    position: fixed;
    bottom: 80px;
    right: 80px;
    width: 80px;
    height: 80px;
    background-color: #ccc;
    font-size: 20px;
    text-align: center;
    padding-top: 12px;
    box-sizing: border-box;
    cursor: pointer;
    color: #000;
    /* Hide the button first */
    display: none;
}

<script>
(function(){
  //Get the element var backtotop = document.getElementById('backtotop');

  var timer;
  backtotop.onclick = function(){
    //Set the table to close first to prevent timer conflict clearInterval(timer);

    //Set the timer timer = setInterval(function(){

      // Change the scrollTop element value of the root element // Compatibility issue var top = document.documentElement.scrollTop || document.body.scrollTop;
      top = top - 80;
      document.documentElement.scrollTop = top;
      document.body.scrollTop = top;

      //Judge if(top <= 0) {
        //Turn off the timer clearInterval(timer);
      }
    },20);
  };

  //Monitor page scrolling window.onscroll = function() {
    //Get the scroll value var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY;

    //When the page is not scrolled, the back to top button is hidden if (scrollTop == 0) {
      backtotop.style.display = 'none';
    }else {
        backtotop.style.display = 'block';
    }
  };
})();

<script>