BackToTop
Um botão pequeno que aparece no canto inferior direito depois de meia tela rolada e leva de volta ao começo.
Nesta página
Playground
Lembrete 1: toda semana, 8h.
Lembrete 2: toda semana, 9h.
Lembrete 3: toda semana, 10h.
Lembrete 4: toda semana, 11h.
Lembrete 5: toda semana, 12h.
Lembrete 6: toda semana, 13h.
Lembrete 7: toda semana, 14h.
Lembrete 8: toda semana, 15h.
Lembrete 9: toda semana, 16h.
Lembrete 10: toda semana, 17h.
<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
Começo da lista
Lembrete 1: toda semana, 8h.
Lembrete 2: toda semana, 9h.
Lembrete 3: toda semana, 10h.
Lembrete 4: toda semana, 11h.
Lembrete 5: toda semana, 12h.
Lembrete 6: toda semana, 13h.
Lembrete 7: toda semana, 14h.
Lembrete 8: toda semana, 15h.
Lembrete 9: toda semana, 16h.
Lembrete 10: toda semana, 17h.
Lembrete 11: toda semana, 18h.
Lembrete 12: toda semana, 19h.
Lembrete 13: toda semana, 20h.
Lembrete 14: toda semana, 21h.
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
<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
- Seta para cima, antes da palavra.
- "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. |