Botón de scroll suave
Problema:
Scroll suave
En páginas con mucho contenido podemos tener este es un poco incómodo tener que usar el ratón o el teclado para volver a la cabecera de la página si queremos ver el menú o el contenido de la parte superior
Solución
Usar un botón
Ejemplo
En el botón puedes colocar un icono o una imagen. En este ejemplo el botón aparece cuando deja de verse la parte superior de la página, con un offset de 5px.
<button id="scrollTopBtn" style="position:fixed; bottom:20px; right:20px; display:none;">
Up
</button>
<script>
const scrollTopBtn = document.getElementById('scrollTopBtn');
window.onscroll = function() {
scrollTopBtn.style.display = window.scrollY > 5 ? 'block' : 'none';
};
scrollTopBtn.onclick = function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
</script>