BackToTop
A small button that appears in the bottom right corner after half a screen of scrolling and takes you back to the top.
On this page
Playground
Reminder 1: every week, 8h.
Reminder 2: every week, 9h.
Reminder 3: every week, 10h.
Reminder 4: every week, 11h.
Reminder 5: every week, 12h.
Reminder 6: every week, 13h.
Reminder 7: every week, 14h.
Reminder 8: every week, 15h.
Reminder 9: every week, 16h.
Reminder 10: every week, 17h.
<div class="scroll-demo" id="pg-scroll" tabindex="0"><div class="scroll-demo-content"><p>Reminder 1: every week, 8h.</p><p>Reminder 2: every week, 9h.</p><p>Reminder 3: every week, 10h.</p><p>Reminder 4: every week, 11h.</p><p>Reminder 5: every week, 12h.</p><p>Reminder 6: every week, 13h.</p><p>Reminder 7: every week, 14h.</p><p>Reminder 8: every week, 15h.</p><p>Reminder 9: every week, 16h.</p><p>Reminder 10: every week, 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>Top</a></div>When to use
- On long screens and boxes: lists, histories, documents. AppShell and DocPage already include it.
When not to use
- Short screens: scrolling is already quick.
- Next to another floating button in the same corner.
Examples
Start of the list
Reminder 1: every week, 8h.
Reminder 2: every week, 9h.
Reminder 3: every week, 10h.
Reminder 4: every week, 11h.
Reminder 5: every week, 12h.
Reminder 6: every week, 13h.
Reminder 7: every week, 14h.
Reminder 8: every week, 15h.
Reminder 9: every week, 16h.
Reminder 10: every week, 17h.
Reminder 11: every week, 18h.
Reminder 12: every week, 19h.
Reminder 13: every week, 20h.
Reminder 14: every week, 21h.
In a scrolling box
Scroll inside the box: after half its height, Top appears in the corner and takes you back. This page has its own too, in the window corner.
Show 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>Anatomy
- Up arrow, before the word.
- "Top": a small button, lifted paper, in the bottom right corner.
States
- Near the top: hidden, and out of the keyboard order.
- After half a screen: it rises and appears.
- Tapped: scrolls smoothly to the top and focus goes there.
Accessibility
- It is a link to the start of the content, and takes focus along.
- It draws 32px, with a 40px touch area.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-button feitio-back-to-top" | required | The button pinned to the bottom corner. |
data-size="small" | required | Always small. |
href | the start of the content | Where it goes. |