Javascript - Fixar elemento apos rolagem

Javascript - Fixar elemento apos rolagem

by Angelo Rogério Rubin

HTML

<div class="container">
    <button type="button" class="btn-back-to-top">
        &#x21d1;
        top
    </button>
</div>

CSS

.container {
    height: 1000px;
    background-color: #CCC;
}
.btn-back-to-top {
    font-size: 2em;
    border: none;
    padding: 5px 10px;
    background-color: salmon;
}

.stuck {
    position:fixed;
    z-index:100;
    bottom: 10px;
    right: 10px;
}

JavaScript

var el = document.querySelector(".btn-back-to-top");

el.style.visibility = "hidden";

window.onscroll = function(){
   var top = (window.pageYOffset || document.documentElement.scrollTop)
   if( top > 300 ) {
       el.style.visibility = "visible";
       el.setAttribute("class", "stuck btn-back-to-top");
   }
    else {
       el.style.visibility = "hidden";
       el.addEventListener('click', function () {
           window.scrollTo(0,0);
       });
    }
}