Crea un botón volver arriba con JavaScript. Aparece al desplazarte, respeta movimiento reducido y devuelve el foco al inicio.
Un regreso claro al comienzo
El botón volver arriba resulta práctico en páginas extensas donde el menú principal queda lejos. Su función debe entenderse sin memorizar un icono. Por eso el ejemplo conserva el texto Volver arriba junto a la flecha. No necesitas instalar una biblioteca para desplazar el documento: scrollTo permite indicar la posición y el comportamiento. Lo importante es coordinar ese movimiento con la visibilidad del control y con el foco de quien navega mediante teclado.
Elegir el umbral con sentido
El valor de quinientos píxeles evita mostrar el botón cuando la persona acaba de entrar. No es una distancia universal. Prueba tu cabecera, la longitud de los apartados y la altura de un móvil antes de cambiarlo. En una página corta quizá no haga falta ningún botón flotante. También puedes mantener un enlace al inicio dentro del pie de página y reservar el control fijo para artículos donde realmente reduzca desplazamientos innecesarios.
Código completo para probar en tu navegador
Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. El ejemplo no requiere bibliotecas.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Botón volver arriba con JavaScript y movimiento reducido</title>
<style>
*{box-sizing:border-box}body{font:16px/1.6 system-ui,sans-serif;max-width:900px;margin:2rem auto;padding:1rem;color:#17233b}label{display:block;font-weight:700;margin-top:1rem}input,textarea,select,button{font:inherit;padding:.65rem;max-width:100%}textarea{width:100%}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #173b94;outline-offset:3px}[hidden]{display:none!important}[role=tab][aria-selected=true]{background:#173b94;color:white}[role=tab]{border:1px solid #bdcbe2;border-radius:.5rem}[role=tabpanel]{padding:1rem;border:1px solid #bdcbe2}
</style>
</head>
<body>
<h1 id="inicio" tabindex="-1">Mi página</h1>
<p>Contenido de la página...</p>
<button id="arriba" type="button" hidden>Volver arriba ↑</button>
<style>
#arriba{position:fixed;right:1rem;bottom:1rem;padding:.8rem 1rem;border:0;border-radius:999px;background:#173b94;color:white}
#arriba[hidden]{display:none}
#arriba:focus-visible{outline:3px solid #e9a400;outline-offset:3px}
</style>
<script>
const boton=document.querySelector('#arriba');
const inicio=document.querySelector('#inicio');
const reducido=matchMedia('(prefers-reduced-motion: reduce)');
function mostrar(){boton.hidden=scrollY<500;}
addEventListener('scroll',mostrar,{passive:true});
boton.addEventListener('click',()=>{
inicio.focus({preventScroll:true});
scrollTo({top:0,behavior:reducido.matches?'instant':'smooth'});
});
mostrar();
</script>
</body>
</html>Por qué se mueve también el foco
Desplazar la ventana no siempre cambia el lugar desde el que continúa el teclado. Si el foco permanece en un botón del pie y el usuario pulsa Tab, puede volver a saltar a la parte inferior. El encabezado recibe tabindex negativo para admitir foco programático sin introducir una parada nueva en el recorrido normal. focus con preventScroll prepara el punto de continuación; después scrollTo realiza el movimiento visible. Prueba ambos pasos en los navegadores de tu audiencia.
Respetar el movimiento reducido
Algunas personas prefieren evitar animaciones porque les producen molestias o dificultan la orientación. La consulta prefers-reduced-motion permite comprobar esa preferencia al pulsar el botón. Si está activa, el salto es inmediato. El ejemplo no almacena esta decisión ni intenta reemplazar la configuración del dispositivo. Evita añadir rebotes, giros o destellos al control: la acción principal ya desplaza una superficie grande y no necesita más estímulos para resultar comprensible.
Ocultar de forma completa
El atributo hidden retira el botón de la presentación y de la navegación accesible mientras no corresponde mostrarlo. Una regla explícita protege ese comportamiento frente a estilos globales que pudieran imponer display. No uses únicamente opacity cero: podrías dejar un control invisible que sigue recibiendo clics o foco. Al volver al inicio el botón desaparece, pero el foco ya está en el encabezado, así que la persona mantiene un punto de referencia útil.
Evitar conflictos con otros elementos fijos
En móviles, la esquina inferior suele competir con avisos de cookies, chats y barras de compra. Deja un margen suficiente y revisa el área segura de dispositivos con controles del sistema. Si existe una acción comercial fija, considera integrar Volver arriba dentro de esa barra o moverlo a una zona libre. No soluciones cada solapamiento elevando z-index. El resultado debe permitir leer, cerrar avisos y activar los enlaces sin precisión excesiva.
Adaptarlo a un contenedor desplazable
scrollY describe el desplazamiento de la ventana. Si tu aplicación usa un panel con overflow auto, este código no medirá ese panel. En ese caso escucha su evento scroll, consulta scrollTop y llama a su método scrollTo. Mantén también el destino de foco dentro de ese contexto. Mezclar la ventana con un panel suele explicar que el botón no aparezca o que se desplace el elemento equivocado.
Comprobaciones antes de publicarlo
Introduce suficiente contenido, baja con el ratón y después con el teclado. Activa el botón usando Enter y Espacio. Confirma que desaparece al regresar y que la siguiente pulsación de Tab sigue desde el comienzo. Repite la prueba con movimiento reducido, zoom alto y una pantalla estrecha. Si un tema ya incluye un botón equivalente, utiliza uno solo: dos controles flotantes para la misma acción añaden confusión y mantenimiento sin aportar una ventaja real.
Un enlace sencillo como alternativa
Si no necesitas controlar aparición ni animación, un enlace a un identificador del comienzo puede ser suficiente. Tiene una dirección comprensible y funciona sin el script. Puedes colocarlo al final del contenido con un texto claro. El botón del ejemplo aporta visibilidad condicionada y control explícito del foco, pero también exige inicialización. Elegir la solución más pequeña depende del sitio. En una guía breve, el enlace final puede resolver la necesidad con menos elementos fijos y sin competir con el contenido mientras la persona está leyendo.
Evitar que el destino quede escondido
Una cabecera fija puede cubrir el encabezado al regresar al inicio o al navegar por anclas. Revisa el espacio que ocupa y decide si necesitas un margen de desplazamiento en el destino. En este ejemplo scrollTo lleva al principio del documento, por lo que conviene comprobar la relación entre cabecera y primer título. No añadas un espaciado enorme solamente para corregir una vista. Prueba diferentes alturas de ventana y el estado de cabeceras que se reducen al desplazarse; su tamaño puede cambiar entre la salida y el regreso.
Inicializar también después de una restauración
El navegador puede restaurar una posición anterior al volver a una página. La llamada inicial mostrar evita depender exclusivamente del primer evento scroll, aunque conviene probar la navegación de ida y vuelta en los entornos objetivo. Si tu aplicación restaura el desplazamiento después de cargar el componente, solicita otra actualización cuando termine esa operación. El botón debe representar la posición actual, no solamente lo que ocurrió desde que se registró el listener. Esa misma idea se aplica a cambios programáticos producidos por enlaces internos o por un índice del artículo.
Elegir un texto que conserve su significado
Volver arriba describe el desplazamiento dentro de la página. No lo sustituyas por Inicio si esa palabra también identifica la portada del sitio, porque podría parecer una navegación a otra dirección. Si utilizas únicamente una flecha por falta de espacio, conserva un nombre accesible y comprueba que la forma sea reconocible. El texto visible suele evitar esa ambigüedad con poco coste. Revisa además que el botón no tape una línea de contenido al aumentar la fuente. Un control auxiliar debe facilitar el recorrido sin ocultar la información que intenta hacer más cómoda de consultar.
Guías relacionadas para seguir practicando
Puedes ampliar esta práctica con Posicionar elementos con CSS y Revisar animaciones CSS.
