---
title: "How to Make a Scroll-to-Section Button in Framer"
description: "Build a scroll-to-section button in Framer using anchor links and smooth scroll — plus a code override for offset headers and cross-page scroll targets."
canonical_url: "https://framerhub.io/blog/scroll-to-section-button-framer"
last_updated: "2026-12-22T00:00:00.000Z"
---

A scroll-to-section button is one of the smallest builds in Framer and one of the most commonly botched — usually because the section lands behind a sticky header, or because someone reaches for a heavy code override when Framer already does this natively. Here's the complete version: the native setup, the sticky-header fix almost every real site needs, and the cross-page case.

## What You're Actually Building

A scroll-to-section button is two things wired together:

1. **A scroll target** — a named section on the page that acts as the destination.
2. **A link action** — attached to a button (or any layer) that, when clicked, scrolls the page to that target.

Framer supports both natively. No plugin, and for the basic version, no code.

## Step 1: Mark the Target Section

Select the frame you want to scroll to — a pricing section, a contact form, a features block. In the right-hand panel, look for the **scroll section** option (sometimes surfaced as a link/anchor setting depending on your Framer version) and enable it. Give it a clear, descriptive name — `pricing-section`, `contact-form` — since this name is what you'll select from the button's link dropdown next. Naming it clearly matters once a page has five or six of these; `Frame 47` six months later tells you nothing.

## Step 2: Add the Button and Link It

Add your button (or use an existing one), select it, and open its **link/interaction settings**. Instead of linking to a URL or another page, choose **scroll to section** and pick the target you named in Step 1. Framer wires up the click behavior automatically — no override needed for this part.

## Step 3: Confirm Smooth Scroll Is On

Framer animates scroll-to-section by default rather than jumping instantly, which is almost always the better feel. If you want an instant jump instead (rare, but sometimes intentional for accessibility-focused builds where reduced motion is preferred), there's typically a toggle in the same link settings to disable the animation.

## The Problem Almost Everyone Hits: Sticky Header Overlap

This is the part native Framer doesn't handle out of the box. If your site has a fixed or sticky header, a scroll-to-section link lands the target section flush at the very top of the viewport — which puts the section's heading directly behind your header. The section technically "worked," but the first line of content is invisible.

Two fixes, in order of how most people should approach it:

**Fix 1 — a spacer/offset frame (no code).** Add an invisible spacer frame directly above your target section, with a height roughly matching your header's height, and mark the *spacer* as the scroll target instead of the section itself. This shifts the landing position down by exactly the header height, without touching any code.

**Fix 2 — a scroll-offset code override (more control).** For a setup where you want one config to apply consistently across every scroll target on the page:

```js
function scrollToSectionWithOffset(sectionId, offset = 80) {
  const el = document.getElementById(sectionId)
  if (!el) return
  const top = el.getBoundingClientRect().top + window.scrollY - offset
  window.scrollTo({ top, behavior: "smooth" })
}
```

Attach this to your button's click handler in place of the native scroll-to-section action, passing your header's actual pixel height as the offset. This is more setup than the spacer trick, but it's the more maintainable option if your site has many scroll-triggered buttons and you'd rather manage the offset in one place than add a spacer frame above every section.

## Scrolling to a Section on a Different Page

The native link action isn't limited to the current page — set the link's destination page to wherever the target lives, and choose the scroll section name defined on that page. Framer navigates to the destination page first, then scrolls to the section once it loads. This is the standard pattern for a homepage nav bar linking to a section that actually lives on a different page (a "Pricing" nav item pointing to a pricing section on a dedicated pricing page, for example) rather than assuming everything lives on one long page.

## Using This for an In-Page Navigation Bar

The most common real use of scroll-to-section buttons isn't a single CTA — it's an entire nav bar where each item scrolls to its matching section on a long single-page site (common for [landing pages](/components) and portfolio sites). Each nav item gets its own scroll-to-section link, same setup as above, repeated per section. If you want the active nav item to highlight based on scroll position (showing which section is currently in view), that's a step beyond the native link action — it needs a small scroll-position listener comparing the viewport against each section's boundaries and toggling an active state on the matching nav item.

## Accessibility: Keyboard and Reduced-Motion Support

Two details separate a scroll-to-section button that merely works from one that works for everyone:

- **Keyboard navigation.** If your button is a genuine button or link element (not a plain frame with an onClick-style interaction bolted on), it gets keyboard focus and Enter-key activation for free. A frame styled to look like a button but lacking real interactive semantics often doesn't respond to keyboard input at all — test by tabbing through the page instead of only clicking with a mouse.
- **Reduced motion.** Some visitors have "reduce motion" enabled at the OS level for vestibular or motion-sensitivity reasons. A large animated scroll jump can be genuinely uncomfortable for them. If you're using the code-override version for offset handling, check `window.matchMedia("(prefers-reduced-motion: reduce)").matches` and fall back to an instant jump (`behavior: "auto"` instead of `"smooth"`) when it's true. Native Framer's built-in smooth scroll doesn't currently respect this system preference automatically, so this check only applies if you've already gone the code-override route for the offset fix.

Neither takes more than a few minutes to add, and both are the kind of detail that separates a button that "technically scrolls" from one that was actually built with the person clicking it in mind.

## Styling the Button Itself

The scroll behavior is the easy part — most of the actual design work goes into making a scroll-to-section button look intentional rather than like a leftover default. A hover state, a subtle icon (a down chevron reads clearly as "there's more below"), and consistent spacing with the rest of your button system matter more to how it feels than the underlying link logic does. If your site already leans on a shared component set for buttons, keep this one consistent with it rather than styling it as a one-off — a component library like [FramerHub Components](/plugins/framer-components) is useful here specifically because it keeps interactive elements like this consistent across a whole site instead of every button getting designed in isolation.

## When to Reach for Something Heavier

For the vast majority of sites, native scroll-to-section plus the spacer or offset fix above is the complete solution — you don't need a plugin or a heavy animation library for this. It's worth reaching for more (a dedicated scroll-driven animation setup) only if you're building scroll-linked effects beyond simple navigation — parallax, scroll-triggered reveals, or a horizontal scroll section. Our [horizontal scroll guide](/blog/framer-horizontal-scroll-guide) covers that more involved territory if that's actually what you're building instead of a simple jump-to-section button.

## Testing Before You Ship It

A scroll-to-section button looks done the moment it scrolls anywhere in preview mode — that's the wrong bar. Test it the way an actual visitor would hit it: click it from a fresh page load (not mid-scroll, where the animation distance is shorter and offset issues are easier to miss), on a real mobile device rather than just Framer's preview at a phone-sized viewport, and after resizing your browser window if your header height changes at different breakpoints. A header that's 64px tall on desktop and 96px tall on mobile (common when a mobile menu button takes more vertical space) needs its offset value to match on each breakpoint — a single fixed offset copied from desktop will undershoot or overshoot on mobile.

## Quick Checklist

- Target section is named clearly and marked as a scroll section.
- Button's link action points to that scroll section, not a URL.
- Sticky header offset is handled (spacer or code override) — test by actually clicking the button, not just previewing the layout.
- Cross-page links tested by navigating from a different page, not just within the same page in preview.
- Mobile tested separately — header heights and section spacing often differ from desktop.

## FAQ

**How do I make a button scroll to a section in Framer?**
Mark the target frame as a scroll section and name it, then set your button's link action to that scroll section. No code needed for the basic version.

**Why does my scroll-to-section button stop short, hiding content behind my sticky header?**
Framer's native target lands at the top of the section, which a sticky header then covers. Fix it with a spacer frame at header height, or a code override that adds a scroll offset.

**Can a scroll-to-section button link to a section on a different page?**
Yes — set the link's destination page and choose the scroll section name defined there. Framer navigates then scrolls automatically.

**Does Framer support smooth scrolling by default?**
Yes, scroll-to-section links animate smoothly by default, with a toggle available to disable it for an instant jump if needed.

**Can I trigger a scroll-to-section from something other than a button, like a nav bar link or logo?**
Yes — any layer with link/interaction support (text, icon, image, frame) can target a scroll section the same way, which is the standard pattern for in-page nav bars.