# BackToTop

Un pequeño botón que aparece en la esquina inferior derecha después de media pantalla de desplazamiento y te devuelve arriba.

## Playground

```html
<div class="scroll-demo" id="pg-scroll" tabindex="0"><div class="scroll-demo-content"><p>Recordatorio 1: cada semana, 8h.</p><p>Recordatorio 2: cada semana, 9h.</p><p>Recordatorio 3: cada semana, 10h.</p><p>Recordatorio 4: cada semana, 11h.</p><p>Recordatorio 5: cada semana, 12h.</p><p>Recordatorio 6: cada semana, 13h.</p><p>Recordatorio 7: cada semana, 14h.</p><p>Recordatorio 8: cada semana, 15h.</p><p>Recordatorio 9: cada semana, 16h.</p><p>Recordatorio 10: cada semana, 17h.</p></div><span class="feitio-scroll-fade" aria-hidden="true"></span><a class="feitio-button feitio-back-to-top" data-size="small" href="#pg-scroll"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-down"></use></svg>Arriba</a></div>
```

## Cuándo usarlo

-   En pantallas y cajas largas: listas, historiales, documentos. AppShell y DocPage ya lo incluyen.

## Cuándo no usarlo

-   **Pantallas cortas:** el desplazamiento ya es rápido.
-   **Junto a otro botón flotante** en la misma esquina.

## Ejemplos

### En una caja con desplazamiento

Desplázate dentro de la caja: después de la mitad de su altura, Top aparece en la esquina y te devuelve atrás. Esta página tiene la suya también, en la esquina de la ventana.

Mostrar código

```html
<div class="caixa-que-rola">
  <div id="conteudo" tabindex="-1">…</div>
  <a class="feitio-button feitio-back-to-top" data-size="small" href="#conteudo">…Topo</a>
</div>
```

## Anatomía

1.  **Flecha hacia arriba**, antes de la palabra.
2.  **"Top":** un pequeño botón, papel elevado, en la esquina inferior derecha.

## Estados

-   **Cerca del top:** oculto y fuera del orden del teclado.
-   **Después de medio pantalla:** se eleva y aparece.
-   **Tapped:** se desliza suavemente hacia arriba y el foco va allí.

## Accesibilidad

-   Es un enlace al inicio del contenido, y lleva el foco consigo.
-   Tiene 32px de ancho, con un área táctil de 40px.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-button feitio-back-to-top"`

obligatorio

El botón fijado en la esquina inferior.

`data-size="small"`

obligatorio

Siempre pequeño.

`href`

el inicio del contenido

Dónde va.