A lightweight, reusable React component that automatically displays a floating action button
when users scroll beyond 300 pixels on a webpage. Clicking the button triggers a smooth,
animated scroll back to the top of the page, significantly improving navigation experience
on content-heavy applications.
Built with React Hooks (useState, useEffect) and Chakra UI framework, this component
provides seamless integration into any React project. Features include:
• Auto visibility toggle based on real-time scroll position
• Smooth scrolling animation with customizable duration
• Fully responsive design across all device sizes
• Optional circular progress indicator showing scroll percentage
• Keyboard accessible and screen reader friendly
• Zero external dependencies (only React + optional UI library)
A lightweight, reusable React component that automatically displays a floating action button
when users scroll beyond 300 pixels on a webpage. Clicking the button triggers a smooth,
animated scroll back to the top of the page, significantly improving navigation experience
on content-heavy applications.
Built with React Hooks (useState, useEffect) and Chakra UI framework, this component
provides seamless integration into any React project. Features include:
• Auto visibility toggle based on real-time scroll position
• Smooth scrolling animation with customizable duration
• Fully responsive design across all device sizes
• Optional circular progress indicator showing scroll percentage
• Keyboard accessible and screen reader friendly
• Zero external dependencies (only React + optional UI library)