Feature Request: Add Scroll to Top Button #204
Description
Description
Add a scroll-to-top button that appears when users scroll down the page, allowing them to quickly return to the top with a smooth animation.
Motivation
- Improves user experience on long pages
- Reduces effort needed to navigate back to top
- Standard UX pattern in modern web applications
Proposed Solution
A floating button that:
- Appears after scrolling 300px down
- Shows circular progress ring indicating scroll position
- Smooth scroll animation on click
- Gradient purple/indigo design matching the app theme
- Hover effects and tooltip
Design Details
- Position: Fixed bottom-right corner
- Visibility: Fade in/out based on scroll position
- Icon: Arrow up icon
- Colors: Purple gradient matching brand colors
- Accessibility: Proper ARIA labels and keyboard support
Technical Considerations
- Use React hooks for scroll detection
- Optimize scroll event listeners (throttle/debounce)
- Ensure accessibility (ARIA labels, focus states)
- Match existing Tailwind CSS design system
Thank you.