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

Slots

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

Events

A list of events that the component will emit:

• UserClickedScrollToTop (opens new window): 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.

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