feat: add scroll-to-top button on explore page

[Harkiratcodess]

Closes #3

added a scroll-to-top button pretty straightforward but needed some care to get right.
It stays hidden until you've scrolled past 500px, so it doesn't clutter the hero section on load. Once it shows up, clicking it smoothly brings you back to the top using window.scrollTo.
Styled it to match the existing brutalist design fixed to the bottom-right, black/white, thick borders, snappy hover. Fits right in without looking bolted on.
Under the hood it's just useState and useEffect with a scroll listener. Made sure to clean up the listener properly so there are no memory leaks hanging around.

Screen.Recording.2026-05-15.011244.mp4

Summary by CodeRabbit

• New Features
  • Added a "Scroll to top" button that appears in the bottom-right corner after scrolling down the page. Click the button to smoothly return to the top.

[coderabbitai]

Warning

Rate limit exceeded

@Harkiratcodess has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 49 minutes and 57 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 90cda71a-4cb6-4a50-b0c1-d381c8d3128e

📥 Commits

Reviewing files that changed from the base of the PR and between 9fb4afd and ad82ffd.

📒 Files selected for processing (1)

• frontend/src/pages/ExplorePage.jsx

📝 Walkthrough

Walkthrough

ExplorePage now tracks vertical scroll position using a useEffect hook and conditionally renders a fixed "Scroll to top" button in the bottom-right corner. The button appears after the user scrolls past 500px and smoothly returns the window to the top when clicked.

Changes

Scroll-to-Top Button Feature

Layer / File(s)	Summary
Scroll-tracking state and handler frontend/src/pages/ExplorePage.jsx	React hooks (useState, useEffect) are imported and used to track scroll position above a 500px threshold. A scroll event listener is attached via useEffect and cleaned up on unmount. The scrollToTop function smoothly scrolls the window back to y:0.
Scroll-to-top button UI frontend/src/pages/ExplorePage.jsx	A fixed, bottom-right floating button is conditionally rendered when showScrollTop is true. The button includes accessible ARIA labeling and an inline SVG chevron-up icon, and is wired to trigger scrollToTop on click.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A rabbit adds grace to scrolling's long race,
With a button so neat in the bottom-right place.
Five hundred pixels down, a chevron appears,
Smooth climbing back up—no more scroll-weary tears! 🐰⬆️

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main feature: adding a scroll-to-top button to the Explore page, matching the primary objective.
Linked Issues check	✅ Passed	The code changes implement all technical requirements from issue #3: scroll-to-top button with useState/useEffect, smooth scrolling via window.scrollTo, scroll threshold detection (500px), and proper cleanup.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the scroll-to-top button feature specified in issue #3; no unrelated or out-of-scope modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🚀 PR Received Successfully

Hello @Harkiratcodess,

Thank you for taking the initiative to contribute to this project.

Please ensure that your PR follows all project guidelines properly before requesting review.

⚠️ Important Instructions

• Maintain proper code quality and structure
• Do not make unnecessary changes/files
• Ensure responsiveness across devices
• Follow existing project conventions strictly
• Attach screenshots/videos for UI-related changes
• Resolve merge conflicts before requesting review
• Avoid AI-generated low quality PRs or copied implementations

📌 Mandatory for GSSoC'26 Participants

Joining the community group and announcement channel is compulsory for all contributors participating through GSSoC'26.

• Telegram Group: https://t.me/c/3991077814/1
• Telegram Channel: https://t.me/+g4esQdo-DyNlZWE1

Failure to follow contribution guidelines may lead to PR rejection.

We appreciate your effort and wish you a great open-source journey ahead. ✨

[kunalverma2512]

@Harkiratcodess
provide video for multiple screen sizes
stick drive links and dont add videos in pr

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/pages/ExplorePage.jsx`:
- Around line 19-30: The effect that registers the scroll listener doesn't
initialize the scroll state on mount, so if the page starts with window.scrollY
> 500 the show-scroll button remains hidden until the next scroll; inside the
useEffect after adding the listener call the handleScroll function once to
initialize state (referencing the handleScroll function, useEffect hook, and
setShowScrollTop state updater) so the visibility is correct on mount/restored
navigations.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 37d06525-6526-4532-97b4-e03c0febc406

📥 Commits

Reviewing files that changed from the base of the PR and between 4879f17 and 9fb4afd.

📒 Files selected for processing (1)

• frontend/src/pages/ExplorePage.jsx