# BackToTop

A small button that appears in the bottom right corner after half a screen of scrolling and takes you back to the top.

## Playground

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

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

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

## Anatomy

1.  **Up arrow**, before the word.
2.  **"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.