# 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.

## Playground

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

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

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

## Anatomie

1.  **Flèche vers le haut**, avant le mot.
2.  **"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.