How to create: button to return to the top of the page

How to create a scroll to top button

First step - Add HTML:

Create a button that, when clicked, will take the user to the top of the page:

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

Second step - Add CSS:

Imposta lo stile del pulsante:

#myBtn {
  display: none; /* Per default è nascosto */
  position: fixed; /* Posizione fissa/sticky */
  bottom: 20px; /* Metti il pulsante a 20px dal basso della pagina */
  right: 30px; /* Metti il pulsante a 30px di distanza dal lato destro della pagina */
  z-index: 99; /* Assicurati che non si sovrapponga */
  border: none; /* Rimuovi il bordo */
  outline: none; /* Rimuovi il contorno */
  background-color: red; /* Imposta il colore di sfondo */
  color: white; /* Colore del testo */
  cursor: pointer; /* Aggiungi il puntatore del mouse quando il mouse è sopra il pulsante */
  padding: 15px; /* Aggiungi some padding interno */
  border-radius: 10px; /* Arrotonda gli angoli */
  font-size: 18px; /* Aumenta la dimensione del carattere */
}
#myBtn:hover {
  background-color: #555; /* Aggiungi uno sfondo scuro di grigio scuro quando il mouse è sopra il pulsante */
}

Passo 3 - Aggiungi JavaScript:

// Ottenere il pulsante:
let mybutton = document.getElementById("myBtn");
// Quando l'utente scorre di 20px dal punto superiore del documento, visualizza il pulsante
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// Quando l'utente clicca sul pulsante, la pagina scrollera alla parte superiore del documento
function topFunction() {
  document.body.scrollTop = 0; // Per Safari
  document.documentElement.scrollTop = 0; // Applicabile a Chrome, Firefox, IE e Opera
}

Prova da solo