import ScrollTop from 'primevue/scrolltop';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/scrolltop/scrolltop.min.js"></script>
Without any configuration, ScrollTop listens window scroll.
<ScrollTop />
When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is defined with the threshold property that defaults to 400.
<ScrollTop :threshold="200" />
ScrollTop can also be assigned to its parent element by setting target as "parent".
<div style="height: 400px; overflow: auto">
Content that overflows to container
<ScrollTop />
</div>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| target | string | window | Target of the ScrollTop, valid values are "window" and "parent". |
| threshold | number | 400 | Defines the threshold value of the vertical scroll position of the target to toggle the visibility. |
| icon | string | pi pi-chevron-up | Icon to display. |
| behavior | string | smooth | Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-scrolltop | Container element. |
| p-scrolltop-sticky | Container element when attached to its parent. |
ScrollTop uses a button element with an aria-label that refers to the aria.scrollTop property of the
| Key | Function |
|---|---|
| enter | Scrolls to top. |
| space | Scrolls to top. |
None.