Fix Home navbar button to scroll to top on landing page

[Phanindra899]

What was fixed

The Home button in the landing page navbar did not scroll the page back to the top when clicked.

Why it happened

The Home link routed to /, and when users were already on the landing page, React Router did not trigger navigation or reset the scroll position.

How it was fixed

• Added a home anchor at the top of the landing page.
• Updated the Home navbar item to reuse the existing scroll-link behavior for smooth scrolling.

This keeps navigation consistent with other section links and avoids unnecessary routing logic.

Fixes #856

Summary by CodeRabbit

Release Notes

• New Features
  • Updated Home navigation link to use smooth in-page scrolling instead of page navigation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes implement in-page smooth scrolling for the landing page Home button. An anchor div with id "home" is added to the top of the hero section, and the Navbar Home link is modified to scroll to this anchor instead of navigating to the root path.

Changes

Cohort / File(s)	Summary
Home navigation anchor implementation landing-page/src/Pages/Landing page/Home1.tsx, landing-page/src/Pages/Landing page/Navbar.tsx	Added anchor div (<div id="home"></div>) at top of hero section in Home1. Modified Navbar Home link from root path navigation ("/") to in-page scroll navigation using isScrollLink mechanism targeting the "home" anchor.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 Hops up to the home so bright,
A smooth scroll makes all things right,
No more clicking, lost at sea,
The navbar leads us gracefully! 🏠✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: fixing the Home navbar button to scroll to the top on the landing page, which directly addresses the issue.
Linked Issues check	✅ Passed	The PR implements the solution to issue #856 by adding a home anchor and updating the Home link to use scroll behavior, enabling users to scroll to the top when clicking Home.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the Home button navigation issue; no out-of-scope modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

landing-page/src/Pages/Landing page/Navbar.tsx (1)

194-196: Critical: Mobile menu Home link not updated with the same fix.

The mobile menu still uses to="/" without the scroll behavior, creating an inconsistent user experience. Mobile users won't get the scroll-to-top functionality that this PR aims to provide.

🔎 Proposed fix for mobile menu consistency

-              <NavLink to="/" onClick={() => setIsOpen(false)}>
+              <NavLink to="#home" isScrollLink={true} onClick={() => setIsOpen(false)}>
                 Home
               </NavLink>

🧹 Nitpick comments (1)

landing-page/src/Pages/Landing page/Home1.tsx (1)

18-18: Consider improving anchor placement to avoid potential layout issues.

The empty <div id="home"></div> anchor works but could cause unintended spacing. Consider one of these alternatives:

• Add the id="home" directly to the existing <section> element at line 17
• Position the anchor absolutely to remove it from the document flow

🔎 Alternative approaches

Option 1: Add ID to the section element (preferred)

-    <section className="w-full px-8 py-12 grid grid-cols-1 md:grid-cols-2 items-center gap-8 max-w-6xl mx-auto bg-white dark:bg-black transition-colors duration-300">
-      <div id="home"></div>
+    <section id="home" className="w-full px-8 py-12 grid grid-cols-1 md:grid-cols-2 items-center gap-8 max-w-6xl mx-auto bg-white dark:bg-black transition-colors duration-300">

Option 2: Use absolute positioning

-      <div id="home"></div>
+      <div id="home" className="absolute top-0"></div>

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 81286fa and 231facd.

📒 Files selected for processing (2)

• landing-page/src/Pages/Landing page/Home1.tsx
• landing-page/src/Pages/Landing page/Navbar.tsx

🔇 Additional comments (1)

landing-page/src/Pages/Landing page/Navbar.tsx (1)

147-147: Desktop Home navigation correctly implements smooth scrolling.

The change to use to="#home" with isScrollLink={true} properly leverages the existing scroll mechanism and addresses the issue for desktop users.