Move to Top

Direction-aware scroll progress button that jumps to the top or bottom on click.

Preview

Scroll down to see the magic!

This is a demo page to showcase the MoveToTop component. Scroll down and watch the button appear with a cool animation!

Installation

1. Run the following command in your terminal:

npx shadcn@latest add https://refinery.abhii.me/r/move-to-top-button.json

API Reference

Component props
Name	Type	Description
size	number	Size in pixels for the button's width and height.
className	string	Additional CSS classes to apply to the button for custom styling.

Design Notes

Motion's useScroll hook is used to track both scroll position and page progress. The SVG circle's circumference becomes the progress ring, filling as you move down the page. The button switches between up and down modes based on scroll direction, so you can use it as a quick jump to the top or bottom with smooth scroll behavior.