1 min read



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


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


Name Description Bindings
(name - type - description)
default (Required) Button content with a text, an icon or both None


A list of events that the component will emit:


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.

    <ScrollToTop scroll-id="scrollId" :threshold-px="1000">
      <span>Scroll to top</span>
  import { ScrollToTop } from '@empathyco/x-components/scroll';
  export default {
    name: 'ScrollToTopTest',
    components: {