[FEATURE] Add Scroll-to-Top Button with Reading Progress Indicator

[ArshiBansal]

Feature description

Add a floating Scroll-to-Top button that becomes visible when users scroll down the page. The button should also include a visual progress indicator showing how much of the page has been read or scrolled through. This enhancement will improve navigation and provide users with better awareness of their reading progress, especially on long pages with extensive content.

Problem this solves

Currently, users must manually scroll back to the top of the page after reaching the bottom of long content sections. This can be inconvenient and negatively affect the user experience. Additionally, users have no indication of how far they have progressed through the page, making navigation less intuitive.

Proposed solution

Implement a floating button positioned at the bottom-right corner of the screen that:

• Appears after the user scrolls beyond a predefined threshold.
• Smoothly scrolls the page back to the top when clicked.
• Displays the current scroll progress using a circular or linear progress indicator.
• Updates the progress indicator in real time based on the user's scroll position.
• Maintains responsiveness across desktop, tablet, and mobile devices.
• Includes accessible labels and keyboard navigation support.

Technical implementation idea

• Use the window.scrollY and document height values to calculate scroll percentage.
• Attach a scroll event listener to update progress dynamically.
• Use CSS animations/transitions for smooth appearance and interaction.
• Use window.scrollTo({ top: 0, behavior: "smooth" }) for smooth scrolling.
• Ensure proper ARIA labels and focus states for accessibility.

Alternatives considered

• A simple Scroll-to-Top button without a progress indicator.
• A fixed progress bar at the top of the page without scroll-to-top functionality.
• Browser-native scrolling behavior without additional navigation aids.

While these alternatives provide partial functionality, combining both features into a single component offers a more complete and user-friendly experience.

Additional context

This feature is particularly beneficial for pages containing lengthy articles, documentation, guides, blogs, FAQs, or project information. The progress indicator helps users understand their current position within the content while the scroll-to-top action improves overall navigation efficiency.

Expected behavior

1. User scrolls down the page.
2. The button becomes visible after a certain scroll threshold.
3. The progress indicator reflects the percentage of the page viewed.
4. Clicking the button smoothly returns the user to the top of the page.
5. Progress resets once the top of the page is reached.

[github-actions]

👋 Thanks for opening an issue, @ArshiBansal!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[ArshiBansal]

/assign

[github-actions]

Hey @ArshiBansal, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.