🔼 Feature: Add “Back to Top” Button for Improved Navigation #100
Conversation
WalkthroughIntroduces a new client-side BacktoTop component and integrates it into the app layout. The component listens to window scroll events to toggle a floating button’s visibility and scrolls smoothly to the top on click. The layout renders this component after the Footer and before the ToastContainer. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Window
participant BacktoTop as BacktoTop Component
note over BacktoTop: Mount
BacktoTop->>Window: addEventListener('scroll', onScroll)
loop While scrolling
User->>Window: Scroll
Window-->>BacktoTop: scrollY change
BacktoTop->>BacktoTop: Toggle visible if scrollY > 0.3 * innerHeight
end
alt Button visible
User->>BacktoTop: Click "Back to Top"
BacktoTop->>Window: window.scrollTo({ top: 0, behavior: 'smooth' })
end
note over BacktoTop: Unmount
BacktoTop->>Window: removeEventListener('scroll', onScroll)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@abinayagoudjandhyala is attempting to deploy a commit to the devsuraj Team on Vercel. A member of the Team first needs to authorize it. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (6)
src/components/BacktoTop.tsx (6)
13-15: Initialize visibility on mount and mark the scroll listener as passive.
- Without an initial call, the button stays hidden on reloads mid-page until the user scrolls again.
- Passive listeners improve scroll performance.
Apply this diff:
useEffect(() => { const toggleVisibility = () => { - setVisible(window.scrollY > window.innerHeight * 0.3); + setVisible(window.scrollY > 300); // or use SHOW_AFTER_PX if extracted }; - window.addEventListener("scroll", toggleVisibility); + toggleVisibility(); // initialize on mount + window.addEventListener("scroll", toggleVisibility, { passive: true }); return () => window.removeEventListener("scroll", toggleVisibility); }, []);
17-19: Respect prefers-reduced-motion for accessibility.Users who prefer reduced motion shouldn’t get forced smooth scrolling.
Apply this diff:
const handleScrollTop = () => { - window.scrollTo({ top: 0, behavior: "smooth" }); + const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; + window.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" }); };
24-28: Add type=button and improve keyboard focus styles; verify mobile visibility intent.
- type defaults to “submit” in forms; be explicit with type="button".
- Add focus-visible ring for accessibility.
- Current classes hide the button on mobile (
hidden sm:flex). The PR states it’s responsive for desktop and mobile. If you intend to show it on mobile, drophiddenand keepflex. If hiding on mobile is intentional, update the PR description.Apply this diff if you want the button visible on mobile and with better focus styles:
- <button - onClick={handleScrollTop} - className="hidden sm:flex fixed cursor-pointer z-[12] right-10 bottom-16 w-12 h-12 rounded-full border-4 border-[#A557F7] bg-[#A557F7] flex items-center justify-center duration-300 hover:bg-purple-700 active:scale-90 transition" - aria-label="Scroll to top" - > + <button + type="button" + onClick={handleScrollTop} + className="flex fixed cursor-pointer z-[12] right-10 bottom-16 w-12 h-12 rounded-full border-4 border-[#A557F7] bg-[#A557F7] items-center justify-center transition duration-300 hover:bg-purple-700 active:scale-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:focus-visible:ring-offset-gray-900" + aria-label="Scroll to top" + >
29-35: Hide decorative SVG from assistive tech.Since the button already has an aria-label, the SVG should be aria-hidden to avoid double announcements.
Apply this diff:
- <svg + <svg + aria-hidden="true" className="w-4 h-4 fill-white" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" >
21-39: Avoid unnecessary semantic wrapper; prefer a Fragment.without a heading/landmark semantics is unnecessary here and adds extra DOM. Apply this diff:
- <section> + <> {visible && ( <button ... > <svg ... /> </button> )} - </section> + </>
5-5: Consider conventional component naming (BackToTop).Minor naming nit: BackToTop is the more common casing. If you choose to rename, remember to update the file name and imports.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/app/layout.tsx(2 hunks)src/components/BacktoTop.tsx(1 hunks)
🔇 Additional comments (2)
src/app/layout.tsx (2)
12-12: LGTM: clean import of the client component.Import path and naming are correct.
53-55: Placement after Footer looks right; quickly verify stacking contexts.With z-[12], the button should sit above most content but below toast notifications (react-toastify defaults to a very high z-index). Please sanity-check that it doesn’t get obscured by any other fixed elements in your app (e.g., chat widgets, cookie banners) and that it doesn’t overlap critical UI on small screens.
| const toggleVisibility = () => { | ||
| setVisible(window.scrollY > window.innerHeight * 0.3); | ||
| }; | ||
|
|
There was a problem hiding this comment.
Align threshold with PR acceptance criteria (300px, not 30% of viewport).
Spec says “appears after the user scrolls down more than 300px,” but the code uses 0.3 × window.innerHeight, which varies across devices and may be <300px on small screens. This is a functional mismatch.
Apply this diff to match the requirement:
- setVisible(window.scrollY > window.innerHeight * 0.3);
+ setVisible(window.scrollY > 300);Optionally, extract the threshold for clarity and future reuse:
// near the top of the component
const SHOW_AFTER_PX = 300;
...
setVisible(window.scrollY > SHOW_AFTER_PX);🤖 Prompt for AI Agents
In src/components/BacktoTop.tsx around lines 9 to 12, the visibility threshold
uses window.innerHeight * 0.3 which contradicts the spec requiring the button to
appear after scrolling more than 300px; replace the calculation with a fixed
300px threshold (e.g., setVisible(window.scrollY > 300)) and optionally extract
a top-level constant like SHOW_AFTER_PX = 300 for clarity and reuse, then use
that constant in the setVisible call.
Suraj-kumar00
added
good first issue
|
Hi @abinayagoudjandhyala, |
|
|
Nice PR, If can contribute to other issue please go ahead... |
|
Hi @abinayagoudjandhyala, |
2 participants
Description:
This PR implements a floating “Back to Top” button that appears after the user scrolls down a certain distance (300px). When clicked, the button smoothly scrolls the page back to the top. The button improves navigation speed on long flashcard and informational pages, enhancing user experience and accessibility.
Why:
Features:
aria-label="Scroll to top").Technical Approach:
useStateanduseEffect) to track scroll position and conditionally render the button.Screenshots :
This PR addresses the feature request: #86
Summary by CodeRabbit