Cacher is the code snippet organizer for pro developers

/**
 * html
 * <a href="#" class="top-button" title="Scroll to Top"><span><i class="fa fa-angle-double-up" aria-hidden="true"></i></span></a>
 * 
 * css
 *.top-button{
    display: none;
    position: fixed;
    z-index: 999;
    right: 0;
    bottom: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50px 50px;
    border-color: transparent transparent #4caf50 transparent;
    -webkit-transform: rotate(360deg);
    text-align: center;
    opacity: .8;
    transition: opacity .2s ease;
  }
  .top-button span{
      font-size: 24px;
      color: #fff;
      position: absolute;
      top: 18px;
      right: 10px;
  }
  .top-button:hover{
          opacity: 1;
  }
 */
 
jQuery(document).ready(function($){
  var offset = 300;
  var speed = 250;

  if($(window).scrollTop() < offset){
      $('.top-button').hide();
  }

  $(window).scroll(function(){
      if ($(this).scrollTop() < offset) {
          $('.top-button').hide();
      } else {
          $('.top-button').show();
      }
  });

  $('.top-button').on('click', function(){
      $('html, body').animate({scrollTop:0}, speed);
      $('.top-button').hide();
      return false;
  });
}); 


/* --- w3s --- */
/**
 * html
 * <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> 
 * 
 * css
  #myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 18px;
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}