@empathyco/x-components
Version:
Empathy X Components
67 lines (47 loc) • 2.35 kB
Markdown
---
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 it 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>
import { ScrollToTop } from '@empathyco/x-components/scroll'
export default {
name: 'ScrollToTopTest',
components: {
ScrollToTop,
},
}
</script>
```