<style>
  #btn-subir {
    position: fixed;
    bottom: 20%; /* 20px */
    right: 15%; /* 20px */
    font-weight: bold;
    width: 1.5em; /* 50px */
    height: 1.5em; /* 50px */
    border-radius: 50%;
    background: #333;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 2.5em; /*18px*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: opacity 0.3s;
    z-index: 1000;
}

#btn-subir:hover {
    background: #555;
}

.oculto {
    opacity: 0;
    pointer-events: none;
}
 </style>
<button id="btn-subir" class="oculto">↑</button>
<script>
  const btnSubir = document.getElementById('btn-subir');

  // Mostrar u ocultar el botón según el scroll
  window.addEventListener('scroll', () => {
      if (window.scrollY > 300) { // Mostrar después de 300px de scroll
          btnSubir.classList.remove('oculto');
      } else {
          btnSubir.classList.add('oculto');
      }
  });

  // Función para subir al inicio
  btnSubir.addEventListener('click', () => {
      window.scrollTo({
          top: 0,
          behavior: 'smooth' // Desplazamiento suave
      });
  });
</script>