BackToTop
Un pequeño botón que aparece en la esquina inferior derecha después de media pantalla de desplazamiento y te devuelve arriba.
En esta página
Playground
Recordatorio 1: cada semana, 8h.
Recordatorio 2: cada semana, 9h.
Recordatorio 3: cada semana, 10h.
Recordatorio 4: cada semana, 11h.
Recordatorio 5: cada semana, 12h.
Recordatorio 6: cada semana, 13h.
Recordatorio 7: cada semana, 14h.
Recordatorio 8: cada semana, 15h.
Recordatorio 9: cada semana, 16h.
Recordatorio 10: cada semana, 17h.
<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
Inicio de la lista
Recordatorio 1: cada semana, 8h.
Recordatorio 2: cada semana, 9h.
Recordatorio 3: cada semana, 10h.
Recordatorio 4: cada semana, 11h.
Recordatorio 5: cada semana, 12h.
Recordatorio 6: cada semana, 13h.
Recordatorio 7: cada semana, 14h.
Recordatorio 8: cada semana, 15h.
Recordatorio 9: cada semana, 16h.
Recordatorio 10: cada semana, 17h.
Recordatorio 11: cada semana, 18h.
Recordatorio 12: cada semana, 19h.
Recordatorio 13: cada semana, 20h.
Recordatorio 14: cada semana, 21h.
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
<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
- Flecha hacia arriba, antes de la palabra.
- "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. |