feat: Add reusable Back to Top button for improved navigation [Issue: #326]

[abdullahxyz85]

Summary [Issue: #326 ]

Implements a floating "Back to Top" button that improves user experience by providing quick navigation to the top of long pages. The button appears after scrolling down and smoothly scrolls users back to the top when clicked.

Motivation

Users need to manually scroll back to the top after navigating through long sections/pages. A floating Back to Top button enhances navigation and improves overall user experience, particularly on long dashboard pages.

What's Changed

New Component

• src/components/BackToTopButton.tsx - Reusable floating button component with:
  • Scroll detection (appears after 300px scroll)
  • Smooth scroll animation to top
  • Full accessibility support (ARIA labels, keyboard navigation)
  • Theme-aware styling using CSS variables
  • Responsive design for all devices
  • Hover and focus animations

Integration

• src/app/providers.tsx - Added BackToTopButton to root Providers component so it appears on all pages

Implementation Details

Features

✅ Floating Button

• Positioned at bottom-right corner (32px from edges)
• 48x48px circular button with up arrow icon
• Fixed z-index (z-50) above other content

✅ Scroll Detection

• Appears after user scrolls down 300px
• Automatically hides when near top of page
• Efficient event listener with proper cleanup

✅ Smooth Scrolling

• Uses native CSS scroll-behavior: smooth
• Works across all modern browsers
• No page jumps or jarring animations

Visual Overview:

---

Checklist

• Code follows project style guidelines
• TypeScript compilation passes (npx tsc --noEmit)
• No new console warnings or errors
• Changes tested locally
• Accessibility verified (keyboard, screen reader)
• Responsive design verified
• Documentation updated (this PR description)

Closes: #326

[vercel]

@abdullahxyz85 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[abdullahxyz85]

@Priyanshu-byte-coder check it now, I close the older PR and create new PRs by spliting from each others, please review and merge and make sure to add the labels, gssoc:approved and level.

[Priyanshu-byte-coder]

One bug in the SVG arrow direction:

Bug: Arrow points DOWN, not UP
The base SVG path M7 16l-4-4m0 0l4-4m-4 4h18 draws a left-pointing arrow (←). Applying rotate(90 12 12) rotates it 90° clockwise → down arrow (↓). For a 'scroll to top' button you need an UP arrow.

Fix: change rotate(90 12 12) to rotate(-90 12 12) (or use rotate(270 12 12)). Or replace the path with one that's inherently upward:

<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />

Everything else looks correct — CSS vars, aria-label, focus:ring, cleanup on unmount.

[abdullahxyz85]

One bug in the SVG arrow direction:

Bug: Arrow points DOWN, not UP The base SVG path M7 16l-4-4m0 0l4-4m-4 4h18 draws a left-pointing arrow (←). Applying rotate(90 12 12) rotates it 90° clockwise → down arrow (↓). For a 'scroll to top' button you need an UP arrow.

Fix: change rotate(90 12 12) to rotate(-90 12 12) (or use rotate(270 12 12)). Or replace the path with one that's inherently upward:

<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />

Everything else looks correct — CSS vars, aria-label, focus:ring, cleanup on unmount.

Just need to do this right , other things are ok? @Priyanshu-byte-coder

[abdullahxyz85]

One bug in the SVG arrow direction:
Bug: Arrow points DOWN, not UP The base SVG path M7 16l-4-4m0 0l4-4m-4 4h18 draws a left-pointing arrow (←). Applying rotate(90 12 12) rotates it 90° clockwise → down arrow (↓). For a 'scroll to top' button you need an UP arrow.
Fix: change rotate(90 12 12) to rotate(-90 12 12) (or use rotate(270 12 12)). Or replace the path with one that's inherently upward:

<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />

Everything else looks correct — CSS vars, aria-label, focus:ring, cleanup on unmount.

Just need to do this right , other things are ok? @Priyanshu-byte-coder

I fix it please review and merge the PR , with gssoc label: gssoc:approved and level.

[abdullahxyz85]

@Priyanshu-byte-coder Done! Please make sure to add the label: gssoc:approved and level:adavanced.

[abdullahxyz85]

@Priyanshu-byte-coder Please review my PRs: #389 , #390 , #392 , #393 , I fix all the things in these that u said me and please review and merge these so that i can work on my other assign issues, and make sure to add the label: gssoc:approved and level: advanced/critical

[Priyanshu-byte-coder]

Clean implementation. Correct CSS var usage throughout, proper SSR guards, rel="noopener noreferrer" on links. The typeof window !== 'undefined' checks are unnecessary in a "use client" component but harmless. Merging.

[abdullahxyz85]

Please here assign my name so that i can got points: