# BackToTop

Ein kleiner Button, der erscheint in der unteren rechten Ecke nach dem Scrollen von halber Bildschirmhöhe und Sie zum oberen Rand führt.

## Playground

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

## Wann verwenden

-   Auf langen Bildschirmen und Boxen: Listen, Historien, Dokumente. AppShell und DocPage enthalten dies bereits.

## Wann nicht verwenden

-   **Kurze Bildschirme:** Das Scrollen ist bereits schnell.
-   **Neben einem anderen schwebenden Button** in derselben Ecke.

## Beispiele

### In einer scrollbaren Box

Scrollen innerhalb der Box: Nach der Hälfte ihrer Höhe erscheint Top in der Ecke und bringt Sie zurück. Diese Seite hat ebenfalls eine eigene, in der Ecken des Fensters.

Code anzeigen

```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.  **Hoch-Pfeil**, vor dem Wort.
2.  **"Top":** ein kleiner Button, angehobenes Papier, in der unteren rechten Ecke.

## States

-   **Nah oben:** versteckt und außerhalb der Tastaturreihenfolge.
-   **Nachhalb eines Bildschirms:** es steigt auf und erscheint.
-   **Tapped:** scrollt sanft nach oben und der Fokus dorthin.

## Barrierefreiheit

-   Es ist ein Link zum Anfang des Inhalts und nimmt den Fokus mit.
-   Es zeichnet 32px auf, mit einer Berührungsbereich von 40px.

## Attribute

Attribut

Werte

Zum Zweck

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

erforderlich

Der unten in der Ecke verankerte Button.

`data-size="small"`

erforderlich

Immer klein.

`href`

das Anfang des Inhalts

Wo es hingehört.