ScrollTop

When to use

Floating scroll-to-top button. We use our own BackToTopButton on creator pages. PrimeVue ScrollTop is an alternative.

Guidelines

  • Show after scroll: Only appear after the user has scrolled down significantly.
  • Bottom-right corner: Standard placement users expect.

How it works

Line 1: Scroll down to see the ScrollTop button.

Line 2: Scroll down to see the ScrollTop button.

Line 3: Scroll down to see the ScrollTop button.

Line 4: Scroll down to see the ScrollTop button.

Line 5: Scroll down to see the ScrollTop button.

Line 6: Scroll down to see the ScrollTop button.

Line 7: Scroll down to see the ScrollTop button.

Line 8: Scroll down to see the ScrollTop button.

Line 9: Scroll down to see the ScrollTop button.

Line 10: Scroll down to see the ScrollTop button.

Line 11: Scroll down to see the ScrollTop button.

Line 12: Scroll down to see the ScrollTop button.

Line 13: Scroll down to see the ScrollTop button.

Line 14: Scroll down to see the ScrollTop button.

Line 15: Scroll down to see the ScrollTop button.

Line 16: Scroll down to see the ScrollTop button.

Line 17: Scroll down to see the ScrollTop button.

Line 18: Scroll down to see the ScrollTop button.

Line 19: Scroll down to see the ScrollTop button.

Line 20: Scroll down to see the ScrollTop button.

Line 21: Scroll down to see the ScrollTop button.

Line 22: Scroll down to see the ScrollTop button.

Line 23: Scroll down to see the ScrollTop button.

Line 24: Scroll down to see the ScrollTop button.

Line 25: Scroll down to see the ScrollTop button.

Line 26: Scroll down to see the ScrollTop button.

Line 27: Scroll down to see the ScrollTop button.

Line 28: Scroll down to see the ScrollTop button.

Line 29: Scroll down to see the ScrollTop button.

Line 30: Scroll down to see the ScrollTop button.

<ScrollTop />
<!-- Or scoped to a container -->
<ScrollTop target="parent" :threshold="100" />