How to Link to a Specific Section of a Page in Framer

Framer has become a go-to tool for building interactive, production-ready websites without touching a code editor. But one feature that trips up a lot of designers is anchor linking — the ability to click a button or nav item and jump directly to a specific section of the same page. Here's exactly how it works, what affects the outcome, and what you'll need to think through based on your own project.

What Is Section Linking and Why Does It Matter?

A section link (also called an anchor link) sends a visitor to a specific part of a page rather than loading a new URL. When you click "Pricing" in a navbar and the page smoothly scrolls down to a pricing section, that's an anchor link at work.

In Framer, this matters because most marketing sites and landing pages are built as single-page layouts — one long scroll with distinct sections. Without anchor links, your navigation becomes decorative. With them, it becomes functional.

The Core Method: Using Frame IDs in Framer

Framer handles anchor linking through a combination of section IDs and its built-in link settings. Here's how the process works:

Step 1 — Assign an ID to Your Target Section

Every frame or component on your Framer canvas can be given a custom HTML ID. This is the anchor target — the destination your link points to.

To set an ID:

1. Select the frame or section you want to link to on the canvas
2. Open the right-hand panel and navigate to the HTML Attributes or ID field (found under the "More" or element settings area depending on your Framer version)
3. Enter a short, lowercase, hyphenated name — for example: pricing, about-us, or contact

This ID becomes part of the page's HTML structure when Framer publishes your site, functioning as a standard id attribute on the rendered element.

Step 2 — Link to the Section Using the Hash Syntax

Once an ID is assigned, you link to it using the standard web convention: a hash (#) followed by the ID.

To apply this link in Framer:

1. Select the button, text, or nav item you want to turn into the link
2. In the right panel, find the Link field
3. Type #pricing (or whatever your section ID is) as the link destination

When a visitor clicks that element on your published site, the browser scrolls to the element carrying that ID. 🎯

Step 3 — Test on the Published or Preview URL

Framer's canvas preview doesn't always reflect scroll behavior the same way a live browser does. Always test anchor links using the Share preview link or your published domain. The behavior in-browser is what counts.

Linking to a Section on a Different Page

If you need to send someone from yoursite.com/about to a section on yoursite.com/, the syntax changes slightly. You'd link to / followed by #section-id — for example: /#pricing.

This is standard browser behavior, not something Framer-specific. Framer respects it as long as the target section has the correct ID on the destination page.

Variables That Affect How This Works

Not every Framer project behaves the same way. A few factors shape your experience:

Handling Fixed Navigation and Scroll Offset 🔧

One of the most common problems: you click an anchor link and the target section lands under your fixed navbar. The section exists, but the heading is hidden.

Framer doesn't have a native scroll offset control in its visual interface. The typical fix is adding a CSS snippet via Framer's Custom Code panel (found in Site Settings → General → Custom Code). A rule like:

html { scroll-behavior: smooth; } [id] { scroll-margin-top: 80px; } 

The scroll-margin-top value should match the height of your fixed header. This pushes the scroll position down so your section title isn't hidden behind the nav.

When You Might Need Custom Code Instead

For most straightforward use cases — a navbar linking to sections on a single-page layout — Framer's native ID + hash link approach is sufficient. But some projects push beyond it:

• Programmatic scrolling triggered by interactions (not simple links) may require a Code Component using JavaScript's scrollIntoView()
• Cross-frame scroll animations that sync with section position may need Framer's scroll-based animation tools combined with IDs
• Deeply nested components sometimes don't expose ID fields cleanly in the visual panel — wrapping them in a plain frame first usually resolves this

The more complex your page structure, the more likely you'll need to inspect your published HTML to confirm IDs are rendering where you expect them.

What Changes Based on Your Setup

A designer building a simple landing page with five stacked sections and a sticky nav will find this process straightforward — assign IDs, add hash links, publish, and test. The whole thing takes minutes.

A developer building a multi-page Framer site with CMS collections, custom components, and scroll-triggered interactions will encounter more variables: where IDs get assigned in nested structures, how offset handling interacts with animation libraries, and whether dynamic content renders IDs consistently.

The mechanics are the same across both scenarios. What differs is how many layers you're working through to get those mechanics to behave predictably in your specific layout.