feat: Add Scroll-to-Top Button for Better Navigation UX

[sarthak111222333]

🔍 Description

Currently, when users scroll down on long pages (such as the home page, PYQs listing, or syllabus sections), there is no way to quickly return to the top of the page without manually scrolling all the way back up.

This is a common UX pattern expected in modern web apps, especially for content-heavy pages.

---

📍 Where does this happen?

• Home page (long sections with features, testimonials, footer)
• Any future long-form content pages (PYQs, Syllabus, Feedback)

---

😕 Current Behavior

User has to manually scroll all the way back to the top — no button or shortcut exists.

✅ Expected Behavior

A floating "Scroll to Top" button (↑) should appear in the bottom-right corner of the screen after the user scrolls down a certain amount (e.g., 300px), and clicking it should smoothly scroll the page back to the top.

---

💡 Suggested Implementation

import { useEffect, useState } from "react";

const ScrollToTop = () => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const toggleVisibility = () => {
      setVisible(window.scrollY > 300);
    };
    window.addEventListener("scroll", toggleVisibility);
    return () => window.removeEventListener("scroll", toggleVisibility);
  }, []);

  return visible ? (
    <button
      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      style={{
        position: "fixed",
        bottom: "2rem",
        right: "2rem",
        zIndex: 999,
        borderRadius: "50%",
        padding: "0.75rem",
        cursor: "pointer",
      }}
      aria-label="Scroll to top"
    >
      ↑
    </button>
  ) : null;
};

export default ScrollToTop;

Then import and add <ScrollToTop /> in App.jsx or the main layout component.

---

📌 Additional Notes

• Button should be accessible (aria-label included)
• Should have smooth scroll behavior
• Should be responsive (visible on both mobile and desktop)
• Styling should match the existing design theme of StudyMatePlus

---

🏷️ Labels Suggested

enhancement good first issue UX frontend

[JiaAneja]

Hi

I would like to work on this issue under GSSoC 2026.

I have reviewed the issue requirements and the project structure. I am interested in contributing to StudyMatePlus and would be happy to work on this task. Kindly assign this issue to me.

Thank you!