BackToTop
Un petit bouton qui apparaît dans le coin inférieur droit après un demi-écran de défilement et vous ramène en haut.
Sur cette page
Playground
Rappel 1: chaque semaine, 8h.
Rappel 2: chaque semaine, 9h.
Rappel 3: chaque semaine, 10h.
Rappel 4: chaque semaine, 11h.
Rappel 5: chaque semaine, 12h.
Rappel 6: chaque semaine, 13h.
Rappel 7: chaque semaine, 14h.
Rappel 8: chaque semaine, 15h.
Rappel 9: chaque semaine, 16h.
Rappel 10: chaque semaine, 17h.
<div class="scroll-demo" id="pg-scroll" tabindex="0"><div class="scroll-demo-content"><p>Rappel 1: chaque semaine, 8h.</p><p>Rappel 2: chaque semaine, 9h.</p><p>Rappel 3: chaque semaine, 10h.</p><p>Rappel 4: chaque semaine, 11h.</p><p>Rappel 5: chaque semaine, 12h.</p><p>Rappel 6: chaque semaine, 13h.</p><p>Rappel 7: chaque semaine, 14h.</p><p>Rappel 8: chaque semaine, 15h.</p><p>Rappel 9: chaque semaine, 16h.</p><p>Rappel 10: chaque semaine, 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>Haut</a></div>Quand l'utiliser
- Sur les longs écrans et boîtes : listes, historiques, documents. AppShell et DocPage l'intègrent déjà.
Quand ne pas l'utiliser
- Petits écrans : le défilement est déjà rapide.
- Côté d'un autre bouton flottant dans le même coin.
Exemples
Début de la liste
Rappel 1 : toutes les semaines, 8h.
Rappel 2 : toutes les semaines, 9h.
Rappel 3 : toutes les semaines, 10h.
Rappel 4 : toutes les semaines, 11h.
Rappel 5 : toutes les semaines, 12h.
Rappel 6 : toutes les semaines, 13h.
Rappel 7 : toutes les semaines, 14h.
Rappel 8 : toutes les semaines, 15h.
Rappel 9 : toutes les semaines, 16h.
Rappel 10 : toutes les semaines, 17h.
Rappel 11 : toutes les semaines, 18h.
Rappel 12 : toutes les semaines, 19h.
Rappel 13 : tous les semaines, 20h.
Rappel 14 : tous les semaines, 21h.
Dans une boîte défilante
Défilez à l'intérieur de la boîte : après sa moitié de hauteur, Top apparaît dans le coin et vous ramène en arrière. Cette page en a aussi sa propre, dans le coin de la fenêtre.
Afficher le code
<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>Anatomie
- Flèche vers le haut, avant le mot.
- "Top" : un petit bouton, papier soulevé, dans le coin inférieur droit.
États
- Presque en haut : caché, et hors de l'ordre du clavier.
- Après la moitié d'un écran : il se soulève et apparaît.
- Tapped : défile doucement vers le haut et la focalisation s'y dirige.
Accessibilité
- C'est un lien vers le début du contenu, qui emporte la focalisation avec lui.
- Il mesure 32px, avec une zone tactile de 40px.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-button feitio-back-to-top" | obligatoire | Le bouton ancré dans l'angle inférieur. |
data-size="small" | obligatoire | Toujours petit. |
href | le début du contenu | Où il va. |