feat: add floating scroll-to-top button on long scrollable pages (closes #125)

[kartikbhardwaj1111]

scroll-demo.mp4

Summary

• I linked the issue this PR addresses
• I kept the change scoped to one issue
• I added screenshots or recordings for UI changes
• I added testing notes

What changed

• Created a reusable, accessible ScrollToTop floating button component in frontend/src/components/common/ScrollToTop.tsx.
• Integrated <ScrollToTop /> into Layout.tsx with container ref support, enabling scroll-to-top navigation across all application routes.
• Added <ScrollToTop /> to LandingPage.tsx for unauthenticated visitors.
• Implemented smooth fade/scale enter and exit transitions (opacity and transform) when scrolling past the 300px threshold.
• Positioned the button at bottom-20 md:bottom-8 to prevent overlapping with mobile bottom navigation.
• Added full keyboard accessibility (aria-label="Scroll to top", focus rings, Enter/Space key triggers).
• Added 5 unit tests in ScrollToTop.test.tsx verifying scroll threshold toggling and click-to-scroll behavior.

Why this change is needed

Long scrollable pages (such as Confessions, Profiles, Study Notes, and Marketplace) required users to repeatedly swipe/scroll to get back to the top navigation. This floating button provides instant one-click return to top.

Testing

• Not tested (explain why)
• Manually tested
• Added/updated automated tests

Automated Test Results:

✓ src/components/common/__tests__/ScrollToTop.test.tsx (5 tests)
  ✓ renders the button with accessible attributes
  ✓ is initially hidden when scroll is at top (0px)
  ✓ becomes visible when window scroll exceeds threshold
  ✓ hides again when window scrolls back to top
  ✓ handles targetRef container scroll and triggers smooth scrolling on click

[github-actions]

Hi @kartikbhardwaj1111, thanks for contributing to Nyay Setu! 🎉

I have automatically:

• 👤 Assigned this PR to you.
• 🏷️ Applied the gssoc:approved label.

Our workflows will now analyze your changes to classify:

• 📈 PR Difficulty: level:*
• 🧩 PR Type: type:*
• 🌟 PR Quality: quality:*

Tip

Ensure your PR description references the issue it resolves (e.g. Closes #123). This allows the bot to inherit any additional labels from that issue!

Happy coding! 🚀