Add "Back to Top" option at the End of the Page

[NidhiKumari2510]

Implement a "Back to Top" option that appears when the user scrolls down the page. Clicking the button should smoothly scroll the user back to the top. This will improve navigation and enhance user experience, especially on long pages.

• Button appears only after scrolling past a certain point.
• Smooth scroll animation to the top when clicked.

[ratnadia]

I'm ratnadia GSSoC'25 contributor and would like to work on this issue.

Here’s how I plan to implement the "Back to Top" functionality:

Visibility on scroll: I’ll use JavaScript (or React, depending on the project) to detect when the user has scrolled past a certain point on the page. The button will remain hidden initially and only appear after scrolling down.

Smooth scrolling: When the button is clicked, it will smoothly scroll the user back to the top of the page. This can be achieved using window.scrollTo({ top: 0, behavior: 'smooth' }) or a similar approach in React.

Design and placement: The button will be positioned in a fixed location (most likely the bottom-right corner) and styled to blend well with the current design. I’ll also make sure it works well across different screen sizes.

This addition will improve navigation, especially for pages with longer content. can you please assign this issue to me?

[the-ayushm]

hey @Samarth2190 assign this issue to me , i want to work on this .

[Swaim-Sahay]

Hey @Samarth2190
Issue: [Feature] Add Scroll-To-Top Toggle Button

Description
The website currently lacks a scroll-to-top button, making it inconvenient for users to quickly navigate back to the top after scrolling through long pages. Adding this feature will improve navigation and overall user experience, especially on pages with extensive content.

Benefits
-Enhances user navigation and usability.
-Saves time and effort for users scrolling manually.
-Adds a small but impactful UX improvement.
-Keeps the UI modern and accessible.

Suggested Implementation
-Add a floating button that appears when the user scrolls down a certain amount (e.g., 300px).
-Use smooth scrolling behavior with window.scrollTo({ top: 0, behavior: 'smooth' }).
-Style the button to match the site’s theme and keep it mobile-responsive.
-Ensure the button does not obstruct any page content.
-Add accessibility attributes like aria-label="Scroll to top".

Thank You