Enhancement: Add 'Scroll to Top' Button

[Aditya948351]

Resolves #19. This PR implements a 'Scroll to Top' floating button that appears after scrolling down, improving site navigation.

[Copilot]

Pull request overview

Adds a global client-side floating “Scroll to Top” control to improve navigation on long pages.

Changes:

• Introduces a ScrollToTop component with scroll-threshold visibility and smooth scrolling behavior.
• Renders the component globally from the root app layout.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/components/layout/ScrollToTop.tsx	Adds the floating scroll-to-top button and scroll listener behavior.
src/app/layout.tsx	Imports and mounts the scroll-to-top component globally.

Comments suppressed due to low confidence (4)

src/components/layout/ScrollToTop.tsx:29

• This always performs a smooth scroll even when the user has requested reduced motion. Other global animated components gate motion with useReducedMotion, so this should fall back to non-smooth scrolling for reduced-motion users.

    window.scrollTo({
      top: 0,
      behavior: "smooth",

src/components/layout/ScrollToTop.tsx:39

• The fade/scale enter and exit animations run unconditionally, which ignores prefers-reduced-motion. Existing global motion components use useReducedMotion, so these animations should be disabled or simplified for reduced-motion users.

          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.8 }}

src/components/layout/ScrollToTop.tsx:41

• Using z-50 for this global fixed button can place it above existing overlays that also use z-50 because the button is rendered later in the root layout. For example, the admin events modal overlay uses z-50, so the scroll button can remain clickable on top of that modal/backdrop when the page is scrolled.

          className="fixed bottom-8 right-8 z-50 p-3 rounded-full bg-blue-600 text-white shadow-lg hover:bg-blue-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900"

src/components/layout/ScrollToTop.tsx:19

• The listener is registered but never invoked on mount, so if the browser restores a page below the 300px threshold or the component mounts while already scrolled, the button stays hidden until the next scroll event. Initialize the visibility state immediately after registering the handler.

    window.addEventListener("scroll", toggleVisibility);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.