rickklaasboer/scrolltotop.md

## scrolltotop.md

      
    Raw
  

              scrolltotop.md
            
          
    Add to HTML files (recommended place is below the opening <body> tag):
<button onclick="scrollToTop()" id="scrollToTop" style="display: none;" title="Go to top">
  <i class="fas fa-arrow-up"></i>
</button>
Add to app.css (doesn't really matter where):
#scrollToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #00d1b2;
  color: white;
  cursor: pointer;
  padding: 15px;
  padding-right: 19px;
  padding-left: 19px;
  font-size: 18px;
  transition: all 0.2s ease-in-out;
}

#scrollToTop:hover {
  background-color: #00b89c;
  transition: all 0.2s ease-in;
}
Add to app.js (doesn't really matter where):
window.addEventListener('scroll', () => {
    const button = document.getElementById('scrollToTop');
    const scrollHeight = document.body.scrollTop || document.documentElement.scrollTop
    if (scrollHeight > 20) {
        button.style.display = "block";
    } else {
        button.style.display = "none";
    }
});

scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
}