feat: add Back to Top button fixed to bottom-right corner#458
Open
nishupr wants to merge 2 commits into
Open
Conversation
|
Someone is attempting to deploy a commit to the firefistisdead's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughA new BackToTop React component tracks window.scrollY and conditionally displays a fixed button that smoothly scrolls the page to the top. The component is rendered on the landing page immediately after the HowItWorks section. ChangesBack to Top Button
Sequence Diagram(s)sequenceDiagram
participant User
participant BackToTop
participant Window
User->>BackToTop: Mounts component
BackToTop->>Window: addEventListener('scroll', onScroll)
User->>Window: Scrolls page
Window->>BackToTop: onScroll (reads scrollY)
BackToTop->>BackToTop: toggle visible when scrollY > 300
alt visible
User->>BackToTop: Clicks button
BackToTop->>Window: scrollTo({ top: 0, behavior: "smooth" })
end
User->>BackToTop: Unmounts component
BackToTop->>Window: removeEventListener('scroll', onScroll)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
github-actions
Bot
added
feature
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/components/BackToTop.jsx (1)
8-9: ⚡ Quick winUse a passive scroll listener for smoother scrolling.
This listener never calls
preventDefault, so passive mode is a safe perf win on scroll-heavy pages.🤖 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 `@frontend/src/components/BackToTop.jsx` around lines 8 - 9, The scroll listener added for handleScroll should be registered as passive for better performance; update the addEventListener call that currently uses "scroll" and handleScroll to pass an options object with { passive: true } and ensure the matching removeEventListener uses the same options (or the same boolean capture value) so the handler is removed correctly; locate the listener registration around the handleScroll useEffect in BackToTop.jsx and change both addEventListener/removeEventListener accordingly.
🤖 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/components/BackToTop.jsx`:
- Around line 6-10: The visibility state in BackToTop.jsx isn't initialized on
mount so visible remains false until the next scroll; in the useEffect that
defines handleScroll and adds the "scroll" listener, call handleScroll() once
(or setVisible(typeof window !== 'undefined' && window.scrollY > 300) on mount)
immediately after adding the event listener to initialize state based on current
window.scrollY, while keeping the existing window.removeEventListener cleanup.
---
Nitpick comments:
In `@frontend/src/components/BackToTop.jsx`:
- Around line 8-9: The scroll listener added for handleScroll should be
registered as passive for better performance; update the addEventListener call
that currently uses "scroll" and handleScroll to pass an options object with {
passive: true } and ensure the matching removeEventListener uses the same
options (or the same boolean capture value) so the handler is removed correctly;
locate the listener registration around the handleScroll useEffect in
BackToTop.jsx and change both addEventListener/removeEventListener accordingly.
🪄 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 Plus
Run ID: 04b1f25f-c039-4bb6-8d85-ceddb33dc407
📒 Files selected for processing (2)
frontend/src/components/BackToTop.jsxfrontend/src/components/Landing/LandingPage.jsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #337
What's Changed
BackToTop.jsxcomponent fixed to bottom-right cornerScreenshots
Summary by CodeRabbit