Botón ir arriba

El backtop es un botón que permite volver a la parte superior de la página de forma ágil.

Vista Previa

Figma

Usos

Cuándo usar

Cuando el contenido de la página es muy extenso (aproximadamente cuatro pantallas).

Cuando necesitas volver a la parte superior de la página con frecuencia para ver los contenidos.

Colocamos el botón de backtop en la parte inferior derecha de la página, ya que es donde los usuarios esperan verlo.

Cuándo no usar

Cuando la página es relativamente corta, el botón de backtop sobra, puesto que el usuario puede hacer scroll sin esfuerzo, y no saturamos la interfaz

No colocamos el botón en otra zona de la pantalla, en esos casos se suele ignora

No ponemos varios backtop en una página. Los usuarios los ignoran y resultan muy repetitivos.

Comportamiento

El componente backtop aparece cuando el contenido de una página es extenso. Aparece cuando los usuarios se desplazan hacia abajo, es decir, cuando es más probable que se necesite, sin interponerse en el contenido de la página y bajo el control del usuario.

Propiedades y variables

Visualización del componente botón ir a arriba en estado activo

Active

Hover

Visualización del componente botón ir a arriba en estado enfocad

Focus

Visualización del componente botón ir a arriba en estado presionado

Pressed

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.