#524:Add smooth section scroll navigation#618
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThe PR implements smooth section scroll navigation by converting route-based navigation to hash-based anchors, adding section IDs, and configuring smooth scrolling behavior with proper offset margins in CSS. ChangesHash-based section navigation
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![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 (1)
src/index.css (1)
92-94: ⚡ Quick winHonor reduced-motion preference for smooth scroll.
Line 92 enables smooth scrolling globally, but there’s no
prefers-reduced-motionoverride. Add a reduced-motion fallback to avoid forced animation for affected users.Proposed patch
html { scroll-behavior: smooth; } + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } +}🤖 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 `@src/index.css` around lines 92 - 94, The global html rule sets scroll-behavior: smooth without honoring users' reduced-motion preference; add a media query `@media` (prefers-reduced-motion: reduce) that overrides the html selector's scroll-behavior to auto (or unset) so users who prefer reduced motion won't get forced smooth scrolling, updating the existing html { scroll-behavior: smooth; } rule and adding the override media block.
🤖 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 `@src/components/Navbar.tsx`:
- Around line 44-46: The "Home" anchor elements in the Navbar component
currently use href="`#home`" which breaks cross-page navigation; update the Home
link(s) (the <a> elements whose inner text is "Home" and className includes
"px-4 py-2 rounded-xl..." in the Navbar component) to use "/#home" instead so
the link returns to the landing page from any route (apply the same change to
both occurrences referenced in the diff).
---
Nitpick comments:
In `@src/index.css`:
- Around line 92-94: The global html rule sets scroll-behavior: smooth without
honoring users' reduced-motion preference; add a media query `@media`
(prefers-reduced-motion: reduce) that overrides the html selector's
scroll-behavior to auto (or unset) so users who prefer reduced motion won't get
forced smooth scrolling, updating the existing html { scroll-behavior: smooth; }
rule and adding the override media block.
🪄 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: efa43907-8a0a-43be-83f8-973684e65f85
📒 Files selected for processing (3)
src/components/Hero.tsxsrc/components/Navbar.tsxsrc/index.css
| <a href="#home" className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500"> | ||
| Home | ||
| </a> |
There was a problem hiding this comment.
Use homepage hash for “Home” links to avoid broken cross-page navigation.
Line 44 and Line 117 use href="#home", which won’t navigate back to the landing page from routes like /contributors. Use /#home (consistent with the other section links) so Home works from any page.
Proposed patch
- <a href="`#home`" className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500">
+ <a href="/#home" className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500">
Home
</a>
@@
- <a
- href="`#home`"
+ <a
+ href="/#home"
className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500"
onClick={closeMenu}
>Also applies to: 116-123
🤖 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 `@src/components/Navbar.tsx` around lines 44 - 46, The "Home" anchor elements
in the Navbar component currently use href="`#home`" which breaks cross-page
navigation; update the Home link(s) (the <a> elements whose inner text is "Home"
and className includes "px-4 py-2 rounded-xl..." in the Navbar component) to use
"/#home" instead so the link returns to the landing page from any route (apply
the same change to both occurrences referenced in the diff).
1 participant
Related Issue
Description
Implemented smooth section scroll navigation across the landing page to improve user experience and navigation flow.
The update ensures that navigating between landing page sections feels smooth and modern instead of abruptly jumping between sections.
Changes Made
How Has This Been Tested?
/contributorsback to homepage sectionsScreenshots (if applicable)
github.tracker.mp4
Type of Change
Summary by CodeRabbit
Release Notes