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

<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

<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

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