Cómo crear un botón de desplazamiento hacia arriba

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Cómo crear un botón de desplazamiento hacia arriba</title>
</head>
<style>
#myBtn {
  display: none; /* Oculto por defecto */
  position: fixed; /* Posición fija / pegajosa*/
  bottom: 20px; /* Coloque el botón en la parte inferior de la página. */
  right: 30px; /* Coloca el botón 30px de la derecha. */
  z-index: 99; /* Asegúrese de que no se superponga */
  border: none; /* Quitar bordes */
  outline: none; /* Quitar contorno*/
  background-color: black; /* Establecer un color de fondo */
  color: white; /* Color de texto */
  cursor: pointer; /* Añadir un puntero del ratón en el hover */
  padding: 15px; /* Algo de relleno */
  border-radius: 10px; /* Esquinas redondeadas */
  font-size: 18px; /* Aumenta el tamaño de la fuente */
}
#myBtn:hover {
  background-color: #555;
}
</style>

<body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Arriba</button>
<div style="background-color:black;color:white;padding:30px">Desplazarse hacia abajo</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">Este ejemplo muestra cómo crear un botón "desplazarse hacia arriba" que se hace visible cuando el usuario comienza a desplazarse por la página.</div>

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; // Para safari
  document.documentElement.scrollTop = 0; // Para Chrome, Firefox, IE y Opera
}
</script>
</body>
</html>