Implement Responsive Back-to-Top Button with Smooth Scrolling

[jikrana1]

🚀 Feature Request

📌 Feature Description

Add a floating "Back to Top" button that appears when users scroll down the page and allows them to smoothly return to the top with a single click.

---

❓ Problem Statement

Currently, users need to manually scroll all the way back to the top after reaching the bottom of a page. This can be inconvenient and may negatively impact the overall user experience, especially on pages with lengthy content.

---

💡 Proposed Solution

Implement a floating button that:

• Appears after the user scrolls beyond a certain distance
• Smoothly scrolls the page back to the top when clicked
• Remains accessible across all pages
• Is responsive on both desktop and mobile devices
• Follows the existing design system and UI consistency

---

🎯 Benefits

• Improves user navigation and accessibility
• Enhances overall user experience
• Reduces unnecessary scrolling effort
• Provides a more modern and user-friendly interface

---

🛠️ Suggested Implementation

• Use a scroll listener to detect the user's scroll position
• Show the button after a predefined scroll threshold
• Use smooth scrolling behavior (scrollTo({ top: 0, behavior: "smooth" }))
• Position the button fixed at the bottom-right corner of the screen

---

🌐 Additional Context

This feature is commonly used in modern web applications and can significantly improve usability on content-heavy pages.

[jikrana1]

Hi
I would be happy to work on this feature if it gets approved. Please assign it to me.

[abinaya-manokaran]

Hi @Ashmita1206 👋

I would like to work on this issue under SSoC'26.

Proposed Solution:

• Create a reusable floating Back-to-Top button component
• Use scroll event listener (or Intersection Observer if applicable) to detect scroll position
• Display the button only after the user scrolls past a defined threshold
• Implement smooth scrolling using window.scrollTo({ top: 0, behavior: "smooth" })
• Ensure responsive positioning for mobile, tablet, and desktop screens
• Add proper accessibility support (aria-label and keyboard support)
• Make sure it aligns with the current UI design system and does not overlap with other floating elements

I will ensure the implementation is clean, reusable, and fully responsive across all devices.

Please assign this issue to me.
Thank you!

[jikrana1]

thank you !