[FEATURE] Add "Back to Top" Button on Long Pages

[sudha09-git]

🧩 Feature Description

Currently, long pages like Courses, Pathway, Resources, and Events require users to manually scroll all the way back to the top. There is no "Back to Top" button anywhere on the site, which creates a poor user experience especially on mobile devices.

🎯 Problem

• Pages like /courses, /pathway, /resources, and /events are content-heavy and require excessive scrolling
• No quick navigation option exists to return to the top of the page
• Mobile users are especially affected as scrolling back is tedious

✅ Proposed Solution

Add a floating "Back to Top" button that:

• Appears only after the user scrolls down 300px or more
• Is fixed at the bottom-right corner of the screen
• Smoothly scrolls the page back to the top on click
• Has a fade-in/fade-out animation when appearing/disappearing
• Is fully accessible (keyboard navigable + aria-label)
• Matches the existing DevPath UI theme (dark/light mode compatible)

🖼️ Expected Behavior

1. User opens any long page (e.g. /courses)
2. User scrolls down past 300px
3. A floating arrow-up button appears at bottom-right
4. User clicks it → page smoothly scrolls back to top
5. Button disappears when user is near the top

💡 Implementation Hint

• Use a useScrollPosition hook or window.scrollY in a useEffect
• Use Tailwind classes for positioning: fixed bottom-6 right-6 z-50
• Add scroll-behavior: smooth or use window.scrollTo({ top: 0, behavior: 'smooth' })
• Show/hide with conditional Tailwind class or CSS transition

📋 Acceptance Criteria

• Button appears only after scrolling 300px down
• Button is fixed at bottom-right corner
• Clicking smoothly scrolls to top
• Button has fade animation on show/hide
• Works in both dark and light mode
• Accessible with keyboard and screen readers (aria-label="Back to top")
• Responsive on mobile and desktop

🏷️ Suggested Labels

enhancement, good first issue, level: beginner, ui/ux, gssoc26

[sudha09-git]

/assign this issue to me
I'm Gssoc2026 contributor