Fixing Anchor Link Scroll Issues in Lovable Single-Page Apps

Why anchor links do not scroll in Lovable single-page apps

In a traditional multi-page website, clicking a link like <a href="#features"> makes the browser scroll to the element with id="features". This is native browser behavior that works without any JavaScript. However, Lovable apps use React Router with BrowserRouter, which intercepts all navigation events. When React Router intercepts a hash link click, it updates the URL hash but does not trigger the browser's native scroll-to-anchor behavior. The URL changes to include #features, but the page stays at its current scroll position. This is a well-known limitation of client-side routing in SPAs. The problem is compounded when navigating to a hash link from a different page. If you click a link to /about#team from the home page, React Router navigates to /about but does not scroll to the #team section. The page loads at the top, and the user has to scroll down manually to find the team section. This is especially frustrating for landing pages that rely heavily on anchor navigation.

• React Router intercepts hash link clicks and does not trigger native browser scroll-to-anchor behavior
• The Link component from react-router-dom does not handle hash fragments for scrolling
• Target elements missing an id attribute that matches the hash in the URL
• Fixed headers or navigation bars covering the scroll target because scroll-margin-top is not set
• Smooth scrolling CSS (scroll-behavior: smooth) not applied to the html element

Error messages you might see

Before you start

• A Lovable project with sections you want to scroll to (e.g., a landing page with Features, Pricing, FAQ sections)
• Each target section has a unique id attribute (e.g., id="features")
• The project uses React Router (standard for Lovable projects)

How to fix it

// Hash link — React Router intercepts it, no scrolling happens
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>

// onClick with scrollIntoView — smooth scroll to each section
<button
  onClick={() => document.getElementById("features")?.scrollIntoView({ behavior: "smooth" })}
  className="hover:underline"
>
  Features
</button>
<button
  onClick={() => document.getElementById("pricing")?.scrollIntoView({ behavior: "smooth" })}
  className="hover:underline"
>
  Pricing
</button>
<button
  onClick={() => document.getElementById("faq")?.scrollIntoView({ behavior: "smooth" })}
  className="hover:underline"
>
  FAQ
</button>

<!-- Section scrolls behind the fixed 64px header -->
<section id="features">
  <h2>Features</h2>
  <p>Our amazing features...</p>
</section>

<!-- scroll-mt-16 adds 64px offset so the section is visible below the header -->
<section id="features" className="scroll-mt-16">
  <h2 className="text-3xl font-bold">Features</h2>
  <p>Our amazing features...</p>
</section>

// Repeating scrollIntoView logic everywhere
<button onClick={() => document.getElementById("features")?.scrollIntoView({ behavior: "smooth" })}>
  Features
</button>
// Copy-pasted for every anchor link...

// Using the reusable ScrollLink component
import ScrollLink from "@/components/ScrollLink";
<ScrollLink targetId="features">Features</ScrollLink>
<ScrollLink targetId="pricing">Pricing</ScrollLink>
<ScrollLink targetId="faq">FAQ</ScrollLink>

// Link component — navigates to /about but ignores #team
import { Link } from "react-router-dom";
<Link to="/about#team">Meet the Team</Link>
// Page loads at /about but stays at the top, does not scroll to #team

// HashLink — navigates to /about and scrolls to #team
import { HashLink } from "react-router-hash-link";
<HashLink smooth to="/about#team">Meet the Team</HashLink>
// Page loads at /about and smoothly scrolls to the #team section

Complete code example

1import { cn } from "@/lib/utils";
2
3interface ScrollLinkProps {
4  targetId: string;
5  children: React.ReactNode;
6  className?: string;
7  offset?: number; // Extra offset in pixels for fixed headers
8}
9
10// Reusable scroll-to-section link component
11// Bypasses React Router for same-page anchor navigation
12const ScrollLink = ({ targetId, children, className, offset = 0 }: ScrollLinkProps) => {
13  const handleClick = (e: React.MouseEvent) => {
14    e.preventDefault();
15    const element = document.getElementById(targetId);
16    if (!element) return;
17
18    // Calculate position accounting for fixed header offset
19    const elementPosition = element.getBoundingClientRect().top + window.scrollY;
20    const offsetPosition = elementPosition - offset;
21
22    window.scrollTo({
23      top: offsetPosition,
24      behavior: "smooth",
25    });
26
27    // Update URL hash without triggering React Router
28    window.history.pushState(null, "", `#${targetId}`);
29  };
30
31  return (
32    <button
33      onClick={handleClick}
34      className={cn(
35        "text-foreground hover:text-primary transition-colors cursor-pointer",
36        className
37      )}
38    >
39      {children}
40    </button>
41  );
42};
43
44// Example: Landing page navigation using ScrollLink
45const LandingNav = () => {
46  return (
47    <nav className="fixed top-0 w-full bg-background/80 backdrop-blur z-50 border-b">
48      <div className="container flex items-center justify-between h-16">
49        <span className="text-xl font-bold">MyApp</span>
50        <div className="flex gap-6">
51          <ScrollLink targetId="features" offset={64}>Features</ScrollLink>
52          <ScrollLink targetId="pricing" offset={64}>Pricing</ScrollLink>
53          <ScrollLink targetId="faq" offset={64}>FAQ</ScrollLink>
54        </div>
55      </div>
56    </nav>
57  );
58};
59
60export default ScrollLink;

Best practices to prevent this

• Use scrollIntoView with behavior: 'smooth' for same-page anchor links — it is simpler and more reliable than React Router hash handling
• Add scroll-mt-16 (or appropriate size) to target sections when using a fixed header to prevent the section from being hidden
• Give every scroll target a unique id attribute that matches the hash in the link (id="features" for #features)
• For cross-page hash links, use react-router-hash-link's HashLink component instead of React Router's Link
• Create a reusable ScrollLink component to avoid repeating scrollIntoView logic across your app
• Use window.history.pushState to update the URL hash without triggering React Router navigation
• Test scroll behavior on mobile devices — touch scrolling and fixed headers behave differently than on desktop

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns