# BackToTop

Um botão pequeno que aparece no canto inferior direito depois de meia tela rolada e leva de volta ao começo.

## Playground

```html
<div class="scroll-demo" id="pg-scroll" tabindex="0"><div class="scroll-demo-content"><p>Lembrete 1: toda semana, 8h.</p><p>Lembrete 2: toda semana, 9h.</p><p>Lembrete 3: toda semana, 10h.</p><p>Lembrete 4: toda semana, 11h.</p><p>Lembrete 5: toda semana, 12h.</p><p>Lembrete 6: toda semana, 13h.</p><p>Lembrete 7: toda semana, 14h.</p><p>Lembrete 8: toda semana, 15h.</p><p>Lembrete 9: toda semana, 16h.</p><p>Lembrete 10: toda 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>Topo</a></div>
```

## Quando usar

-   Em telas e caixas longas: listas, históricos, documentos. O AppShell e o DocPage já trazem.

## Quando não usar

-   **Telas curtas:** rolar já é rápido.
-   **Junto de outro botão flutuante** no mesmo canto.

## Exemplos

### Numa caixa que rola

Role dentro da caixa: depois de meia altura, o Topo aparece no canto e leva de volta. Esta página também tem o dela, no canto da janela.

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>
```

## Anatomia

1.  **Seta para cima**, antes da palavra.
2.  **"Topo":** botão pequeno, papel sobreposto, no canto inferior direito.

## Estados

-   **Perto do começo:** escondido, e fora da ordem do teclado.
-   **Depois de meia tela:** sobe e aparece.
-   **Tocado:** rola suave até o começo e o foco vai para lá.

## Acessibilidade

-   É um link para o começo do conteúdo, e leva o foco junto.
-   Desenha 32px, com toque de 40px.

## Atributos

Atributo

Valores

Para quê

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

obrigatório

O botão preso no canto de baixo.

`data-size="small"`

obrigatório

Sempre pequeno.

`href`

o começo do conteúdo

Para onde ele leva.