---

title: ScrollToTop

---

# ScrollToTop

The `ScrollToTop` component is a button that the user can click to make a container scroll
up to its initial position.

## Props

| Name                     | Description                                          | Type                       | Default                        |
| ------------------------ | ---------------------------------------------------- | -------------------------- | ------------------------------ |
| <code>animation</code>   | Animation to use for showing/hiding the button.      | <code>AnimationProp</code> | <code>() => NoAnimation</code> |
| <code>thresholdPx</code> | Threshold in pixels from the top to show the button. | <code>number</code>        | <code></code>                  |
| <code>scrollId</code>    | Id of the target scroll component.                   | <code>string</code>        | <code>MainScrollId</code>      |

## Slots

| Name                 | Description                                            | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |

## Events

A list of events that the component will emit:

- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the button. The event payload is the id of the scroll
  that is going to be scrolled.

## Examples

### Basic example

The component renders whatever is passed to it in the default slot and scrolls to top the scroll
with an id `scrollId`.

It also receives an optional threshold in pixels. When the threshold is reached from the top, the
component will be shown once the user scrolls `UP`.

If this parameter is not provided the button will be visible when the user almost reaches the end of
the scroll.

```vue
<template>
  <div>
    <ScrollToTop scroll-id="scrollId" :threshold-px="1000">
      <span>Scroll to top</span>
    </ScrollToTop>
  </div>
</template>

<script setup>
import { ScrollToTop } from "@empathyco/x-components/scroll";
</script>
```