[Feature] Add a "Scroll to Top" Button

[Richajaishwal0]

Summary

Add a floating "Scroll to Top" button that appears on long pages when the user scrolls down, improving navigation and user experience.

Motivation

Currently, there is no "Scroll to Top" button available. Users must manually scroll back to the top on long pages (homepage, challenges, documentation), which can be inconvenient. Adding this feature would improve usability, especially for new users or those browsing extensive content.

Possible Solution

• Create a button component that appears after scrolling down a certain offset.
• On click, the button smoothly scrolls the page to the top.
• Style the button to match the site's theme (light/dark).
• Optionally, add a fade-in animation for appearance/disappearance.

Additional Context

[VaibhavSingh2006]

Hi mentors! 👋

I would love to work on this feature as part of GSSoC’25.

🧭 Summary:
There is currently no "Scroll to Top" button across long pages like the homepage, challenges, or documentation. Implementing this would significantly enhance navigation and user experience.

🛠️ My Plan:

• Add a floating button that becomes visible after scrolling a certain distance (e.g., 300px)
• Implement smooth scrolling behavior when clicked
• Style the button to match both light and dark themes
• Add a fade-in/out animation for subtle appearance/disappearance
• Ensure responsiveness across devices

✅ Benefits:

• Improved usability and accessibility
• Seamless navigation, especially on long pages
• Lightweight and non-intrusive UI addition

Please assign this to me—I’ll ensure clean, modular, and well-commented code. Thank you! 🙌