Quizás la forma más fácil de ofrecer eso al usuario es un enlace que apunta a una ID en el <html> elemento. Asi como…
<html id="top">
<body>
<!-- the entire document -->
<a href="https://css-tricks.com/need-to-scroll-to-the-top-of-the-page/#top">Jump to top of page</a>
</body>
</html>Pero tenemos algunas opciones aquí.
Si desea que se desplace suavemente hasta la parte superior, puede hacerlo en CSS si lo desea:
html {
scroll-behavior: smooth;
}Tenga en cuenta que colocar una propiedad en el elemento HTML como ese es un comportamiento que lo abarca todo sobre el que no tiene mucho control.
En este caso, tampoco nos estamos vinculando a un elemento enfocable, lo que significa que el enfoque no cambiará. Probablemente eso sea importante, así que esto sería mejor:
<html>
<body>
<a id="top"></a>
<!-- the entire document -->
<a href="https://css-tricks.com/need-to-scroll-to-the-top-of-the-page/#top">Jump to top of page</a>
</body>
</html>Es mejor porque el enfoque se moverá a esa etiqueta de anclaje, lo cual es bueno para las personas que usan el teclado o la tecnología de asistencia.
Sin embargo, estos requieren clics. Es posible que deba activar el desplazamiento dentro de JavaScript, en cuyo caso:
window.scrollTo(0, 0);… es una apuesta segura para desplazar la ventana (o cualquier otro elemento) hacia la parte superior. El comportamiento de desplazamiento de eso también está determinado por CSS, pero si no lo está haciendo, puede forzar la suavidad en JavaScript:
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});Para una historia más completa sobre el desplazamiento suave, tenemos una página para eso.