Fix: Home button now scrolls to top smoothly on landing page (#856)

[varsharaodevaraj]

Summary

This PR fixes the issue where clicking Home on the landing page
did nothing when the user was already on /.

React Router does not trigger navigation if you are already on the
same route, so the scroll position was not reset.

Changes

• Added id="home" at the top of the landing layout
• Updated the Home navbar item to use #home with isScrollLink
• Ensures smooth scrolling consistent with other section links

Why this works

The navbar already implements smooth scrolling for section anchors.
By using #home, we reuse that logic and avoid router no-ops.

Manual Testing

1. Open landing page
2. Scroll down
3. Click Home
4. Page scrolls smoothly back to the top (desktop + mobile)

Fixes #856

Summary by CodeRabbit

• Improvements
  • Enhanced in-page navigation to smoothly scroll between sections while automatically accounting for the sticky navbar position, ensuring content remains fully visible when navigating.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

These changes fix the Home button navigation on the landing page by adding a wrapper div with id="home" to the root component and implementing custom smooth-scroll behavior with a 90px offset to account for the sticky navbar height.

Changes

Cohort / File(s)	Summary
Root wrapper configuration landing-page/src/App.tsx	Changed HomePage component root from React fragment to div with id="home" to serve as the scroll target for navigation links
Navigation and scroll behavior landing-page/src/Pages/Landing page/Navbar.tsx	Replaced native scrollIntoView with custom smooth scroll function applying 90px offset; updated Home and navigation links to use hash anchors (#home) and set isScrollLink={true} to trigger offset-scrolling behavior for both desktop and mobile variants

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A button that was lost, now finds its way home,
Smooth scrolling through the page with a 90-pixel roam,
The navbar steps aside, no longer in the way,
Click the Home button now, and scroll the landing page's day! 🚀

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 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 button to scroll smoothly to the top on the landing page, which matches the primary objective of addressing issue #856.
Linked Issues check	✅ Passed	The PR successfully implements the requirements from issue #856: adding id="home" to the root element, updating Home navbar links to use #home with isScrollLink, and enabling smooth scrolling with navbar offset.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the Home button navigation issue. The modifications to App.tsx and Navbar.tsx are focused and necessary for implementing the smooth scroll-to-top functionality.

✨ 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)

117-137: Wrap logo links with NavLink component to enable smooth scroll behavior.

The logo links (image and text, lines 117-137) currently use plain <Link to="/"/> instead of the NavLink wrapper. When users are already on the landing page and click the logo, no scroll action occurs.

To match the Home button pattern and provide consistent UX, update both logo links to use:

<NavLink to="#home" isScrollLink={true}>
  {/* logo content */}
</NavLink>

The #home anchor is properly defined in App.tsx and the NavLink component already supports this scroll behavior.

🧹 Nitpick comments (1)

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

30-38: Scroll implementation correctly accounts for sticky navbar.

The custom scroll calculation properly offsets by 90px to prevent content from hiding behind the fixed navbar.

Consider extracting the offset to a named constant for better maintainability:

Optional refactor: Extract magic number to constant

+ // Offset to account for sticky navbar height
+ const NAVBAR_OFFSET = 90;
+
  const handleClick = (e: React.MouseEvent) => {
    if (isScrollLink) {
      e.preventDefault();

      // Remove the # from the target
      const targetId = to.replace("#", "");
      const element = document.getElementById(targetId);

      if (element) {
        // Scroll with offset to account for sticky navbar
-       const offset = 90;
+       const offset = NAVBAR_OFFSET;
        const elementTop = element.getBoundingClientRect().top + window.scrollY;
        const targetScroll = elementTop - offset;

        window.scrollTo({
          top: targetScroll,
          behavior: "smooth",
        });
      }

📜 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 d22c925.

📒 Files selected for processing (2)

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

🔇 Additional comments (3)

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

151-151: Desktop Home link updated consistently.

The change to #home with isScrollLink={true} aligns with the pattern used for other section links (Features, About) and properly fixes the scroll behavior for the single-page layout.

Note: This approach changes the URL to /#home when clicked. If this is undesirable, or if future multi-page navigation is planned, consider implementing a solution that checks the current route and conditionally applies scroll behavior only when already on /, while preserving standard navigation from other routes.

---

198-200: Mobile Home link properly updated.

The change maintains the menu-closing behavior while adding the scroll functionality, consistent with other mobile navigation items.

landing-page/src/App.tsx (1)

18-27: The wrapper div is safe and introduces no layout issues.

The <div id="home"> is nested inside the Route element hierarchy, not a direct child of the .relative.pt-20 container, so it has no impact on layout. App.css contains only minimal styling with no direct child selectors targeting container elements. The change correctly enables hash-based navigation via getElementById() calls (as used in Navbar.tsx).