feat: add back to top scroll button

[zaibamachhaliya]

Summary

Implemented a floating "Back to Top" button to improve navigation and user experience on long pages.

Changes Made

• Added a BackToTop component
• Button appears after scrolling down the page
• Smooth scroll-to-top functionality
• Button hides when user is at the top
• Fixed positioning at the bottom-right corner
• Responsive design for desktop and mobile devices
• Added accessibility support with aria-label

Screenshots

Issue Fixed

Closes #98

Testing

• Verified button appears after scrolling
• Verified smooth scrolling behavior
• Verified button hides at the top of the page
• Tested responsiveness across screen sizes

Summary by CodeRabbit

• New Features
  • Introduced a floating "Back to Top" button that automatically appears after you scroll down the page. Click the button to smoothly return to the top with a single action. The feature includes accessibility improvements to ensure all users can easily navigate back to the beginning of the page.

[vercel]

@zaibamachhaliya is attempting to deploy a commit to the niharika-mente's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new BackToTop client component is added that monitors scroll position and shows a floating button after 200px of scrolling. The button triggers a smooth scroll to the top on click. The component is imported and rendered in RootLayout inside PostHogProvider, after Navbar.

Changes

BackToTop Button Feature

Layer / File(s)	Summary
BackToTop component implementation components/BackToTop.tsx	Defines a "use client" component with a useState/useEffect scroll listener (threshold: 200px), a scrollToTop handler using window.scrollTo({ top: 0, behavior: "smooth" }), and a conditionally rendered fixed-position circular button with ArrowUp icon, aria-label, and title.
RootLayout integration app/layout.tsx	Imports BackToTop and renders <BackToTop /> inside PostHogProvider after Navbar.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested labels

enhancement

🚥 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
Title check	✅ Passed	The PR title accurately summarizes the main change: adding a back-to-top scroll button feature.
Description check	✅ Passed	The PR description covers summary, changes made, issue fixed, and testing sections, though the template's type of change and checklist sections are not explicitly completed.
Linked Issues check	✅ Passed	The implementation meets all requirements: button visibility at 200px scroll threshold, fixed bottom-right positioning, smooth scroll-to-top functionality, and auto-hide when at top of page.
Out of Scope Changes check	✅ Passed	All changes are within scope; the PR adds the BackToTop component and integrates it into the root layout as specified in issue #98.

_{✏️ 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.}

[zaibamachhaliya]

Hi @maintainer,
The PR for this issue is ready. Could you please review it?
Thank you!

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

components/BackToTop.jsx (1)

14-18: ⚡ Quick win

Use a passive scroll listener.

Marking the scroll listener as passive helps avoid main-thread scroll blocking.

Suggested fix

-    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("scroll", handleScroll, { passive: true });

     return () => {
-        window.removeEventListener("scroll", handleScroll);
+        window.removeEventListener("scroll", handleScroll);
     };

🤖 Prompt for 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.

In `@components/BackToTop.jsx` around lines 14 - 18, The scroll event listener in
the event setup is not marked as passive, which can cause main-thread blocking
during scroll. Modify both the addEventListener and removeEventListener calls to
include a third argument that specifies the listener options with passive set to
true. This applies to the window.addEventListener call for the scroll event with
handleScroll handler and its corresponding removeEventListener in the cleanup
function.

🤖 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 `@components/BackToTop.jsx`:
- Around line 9-19: In the useEffect hook of the BackToTop component, after
registering the scroll event listener with window.addEventListener, invoke
handleScroll() once to initialize the button visibility based on the current
scroll position. This ensures that if the page loads with a scroll position
already greater than 200px (such as after scroll position restoration), the
button will display correctly instead of remaining hidden until the next scroll
event occurs.

---

Nitpick comments:
In `@components/BackToTop.jsx`:
- Around line 14-18: The scroll event listener in the event setup is not marked
as passive, which can cause main-thread blocking during scroll. Modify both the
addEventListener and removeEventListener calls to include a third argument that
specifies the listener options with passive set to true. This applies to the
window.addEventListener call for the scroll event with handleScroll handler and
its corresponding removeEventListener in the cleanup function.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a522fbfb-9ba6-4dcb-a0cc-a11bdde7b718

📥 Commits

Reviewing files that changed from the base of the PR and between 96ecc66 and d7c752b.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json, !package-lock.json

📒 Files selected for processing (3)

• app/layout.tsx
• components/BackToTop.jsx
• package.json

[TarunyaProgrammer]

@zaibamachhaliya, try to give images/mockups/videos for any UI change 🙂

[TarunyaProgrammer]

Thank you for the contribution. The feature itself is useful and the implementation is straightforward, but a few changes are needed before this can be merged:

• Please revert the mongoose version upgrade and the related package-lock.json changes. These modifications are unrelated to the Back to Top button and introduce unnecessary dependency noise into the PR.
• The project uses TypeScript. Please rename components/BackToTop.jsx to components/BackToTop.tsx.
• The component currently uses hardcoded cyan color values. Please use the existing design system tokens (bg-primary, border-primary, etc.) to keep styling consistent with the rest of the application.
• Consider calling handleScroll() once inside the useEffect after registering the scroll listener. This ensures the button is shown correctly when the page loads with a restored scroll position.

Once these items are addressed, the feature should be ready for another review.

[zaibamachhaliya]

@TarunyaProgrammer

All requested changes have been implemented! ✅

Changes made:

• Reverted package.json & package-lock.json
• Renamed to BackToTop.tsx
• Used design tokens (bg-primary, text-primary-foreground)
• Fixed visibility bug on mount
• Added smooth scroll & accessibility
  Screenshots attached above.

Could you please review the updated changes?
Thank you!

[TarunyaProgrammer]

The button currently uses bg-primary text-primary-foreground, but --primary is a very light cyan (#59deca) and --primary-foreground resolves to near-white. This results in very low contrast (~1.6:1), which does not meet WCAG accessibility requirements and makes the icon difficult to see.

Consider using a darker foreground color instead, consistent with other primary buttons in the project:

- bg-primary text-primary-foreground
+ bg-primary text-black

Please update the button styling to ensure sufficient contrast before merging.

[zaibamachhaliya]

@TarunyaProgrammer
Requested changes have been addressed. Could you please review again? Thank you!

[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 `@components/BackToTop.tsx`:
- Line 39: In the BackToTop component, replace the hardcoded text-black class
with text-primary-foreground in the className containing bg-primary. This
ensures the text color uses the design token system for proper theme consistency
and contrast instead of being hardcoded to black.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 87c6eb37-4803-4b5e-b35b-894277fc1af7

📥 Commits

Reviewing files that changed from the base of the PR and between d7c752b and cdd473d.

📒 Files selected for processing (1)

• components/BackToTop.tsx

..