Flèche retour vers le haut SystemeIO.com

<button class="scrollToTopBtn">⬆️</button>
<script>
var scrollToTopBtn = document.querySelector(".scrollToTopBtn");
var rootElement = document.documentElement;
function handleScroll() {
  var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;

  // ici il faut changer de 0 à 1, par exemple 0.1 c'est 10% de la page
  // la flèche apparaît quand on a fait défiler 10% de la longueur de la page

  if (rootElement.scrollTop / scrollTotal > 0.1) {
    scrollToTopBtn.classList.add("showBtn");
  } else {
    scrollToTopBtn.classList.remove("showBtn");
  }
}
function scrollToTop() {
  rootElement.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}
scrollToTopBtn.addEventListener("click", scrollToTop);
document.addEventListener("scroll", handleScroll);
</script>
<style>
.scrollToTopBtn{background-color:black;border:none;color:white;cursor:pointer;font-size:18px;line-height:48px;width:48px;position:fixed;bottom:60px;right:20px;z-index:100;opacity:0;transform:translateY(100px);transition:all 0.5s ease;}
.showBtn{opacity:1;transform:translateY(0);}
</style>