How to Add Anchor Links in Squarespace

Q: Can I anchor to a specific block instead of a whole section?

In Squarespace 7.1, the supported, reliable method is to assign an ID to the section. If you need finer control, place the content at the top of its own section and anchor that section. Combine with scroll-margin-top for precise alignment so headings don’t sit under a sticky header.

Overview

Anchor links in Squarespace 7.1 let visitors jump to a specific section with a single click. They’re perfect for long pages: FAQs, pricing, services, or any spot you want to highlight. You’ll add a section ID in Fluid Engine, then point your links to that ID. It’s simple, fast, and clean.

This guide focuses on Squarespace 7.1’s Fluid Engine. We’ll cover how to add anchor targets, link them from your navigation, buttons, and text, and enable smooth scrolling for a polished feel. If you want to style these jump links further, see our companion guide on custom CSS in Squarespace.

Sticky headers and announcement bars can hide the top of your anchored sections. We’ll show you the one-line fix. If your site uses an announcement bar, read the note on offsets below and our guide on editing the Squarespace announcement bar for placement and sizing tips. You can also tidy up anchor link typography using the steps in change Squarespace fonts.

By the end, you’ll be able to add anchor links Squarespace-style—reliable, readable, and fast.

Add anchor links instantly with MicroEdits

If you’d rather not poke through menus, MicroEdits does the heavy lifting for existing Squarespace sites. Describe what you want, and it makes the edits. No HTML. No CSS. No copy-paste. Just say what should happen—add section IDs across a page, update menu items to jump to sections, enable smooth scroll sitewide, and adjust offsets so headers don’t cover your content. You can preview changes, share them, and roll back if needed. It works on any Squarespace 7.1 site and applies changes instantly.

Edit by describing the change in plain English
Works across pages, navigation, buttons, and text
Preview safely, then apply or revert in seconds
No coding or manual setup required

enter any Squarespace site

Create anchors in Fluid Engine

Squarespace 7.1 lets you assign an ID to a page section. That ID is your anchor target.

Open the page

Go to Pages → choose your page → Edit.

Add a section ID

Hover the section → open Section settings (gear icon).
Go to Advanced (or the field labeled Section ID).
Enter a short, unique ID such as pricing, features, contact-us.
Save.

Keep IDs unique and readable

Use lowercase and hyphens; avoid spaces and punctuation.
One ID per section, and don’t repeat IDs on the same page.

Nudge the visual start

Place the anchor slightly above the content it describes.
Add top padding in the section, or a small Spacer block at the top.
We’ll also add a CSS offset below so sticky headers don’t cover the first line.

Quick reference:

Good IDs	Avoid
pricing	pricing section (has a space)
our-services	our_services (underscores)
faq-top	FAQ! (punctuation)

Link from nav, buttons, and text

Once a section has an ID, pointing links to it is straightforward.

Same‑page jump
Set the link to #pricing (replace pricing with your ID).
Works in text links, buttons, and image blocks with links.
Cross‑page jump
Include the page path: /services#pricing.
Use the correct page slug and a leading slash.
Navigation menu
In Pages, add a Link in your navigation. Set its URL to /services#pricing. Label it clearly so visitors know exactly where they’ll land.
Test the path
If your page lives at /about/team, a link to #bio stays on that page only. To jump into team from elsewhere, use /about/team#bio.

Accessibility tips:

Use clear, descriptive link text (for example: Jump to Pricing or Go to FAQs).
Make sure the focused element after the jump contains the info the user expects. For guidance on link clarity, see WAI: Link purpose.

Enable smooth scrolling

Default jumps can feel abrupt. Add a small CSS snippet for smooth, accessible scrolling and to prevent sticky headers from covering the top line after a jump.

Add this in Design → Custom CSS:

/* Smooth scrolling sitewide */
html:focus-within {
  scroll-behavior: smooth;
}

/* Offset anchors so sticky headers don't hide the target.
   Adjust 80px to match your header + announcement bar height. */
:target {
  scroll-margin-top: 80px;
}

Notes:

scroll-behavior is a standard CSS property; see MDN: scroll-behavior.
For extra control, you can set scroll-margin-top on specific elements (like headings). Reference: MDN: scroll-margin-top.

If you adjust your header or announcement bar height later, update the 80px value to match.

Common mistakes

Duplicate IDs
Two sections named pricing on one page will break links. Make each ID unique.
Hidden under sticky headers
If the top line is clipped, increase scroll-margin-top (e.g., 96px or 112px). Check both desktop and mobile.
Wrong path for cross‑page links
Use the full path with a leading slash: /services#pricing. Typos in the slug are common.
Illegal ID characters
Stick to lowercase letters, numbers, and hyphens.
Linking to drafts or unlinked pages
Publish or move the page into navigation before you test.

Troubleshooting checklist:

Unique IDs per page
Correct path + hash
scroll-margin-top matches header height
Test on mobile and desktop
Clear, descriptive link text

FAQ

Can I add multiple anchor links on a single Squarespace page?

Yes. You can assign different IDs to as many sections as you need. Keep each ID unique and readable. Use lowercase and hyphens (for example: overview, features, pricing, faq-top). Add the IDs to the sections you want to reach, then link to them from buttons, text, or navigation. Finally, test each anchor on mobile and desktop to confirm smooth scrolling and proper offsets.

How do I handle sticky headers so anchors aren’t hidden?

Use a CSS offset so the browser stops a bit earlier. Add scroll-margin-top to your target with a value that equals your header plus announcement bar height—often 64–112px. The example in this guide uses 80px. If your header changes size on mobile, test there too and adjust the value to suit.

Can I link to a section from another page or an external site?

Yes. For cross‑page links on your site, add the page path plus the hash: /services#pricing. From an external site, include the full URL: https://yoursite.com/services#pricing. Make sure the page is published and the section ID matches exactly. If you re‑title the page and the slug changes, update your links.

Do anchor links help SEO?

Anchor links primarily improve user experience by getting people to what they want faster. That usually reduces pogo‑sticking and can improve engagement metrics. They’re also useful for accessibility. Use descriptive link text and structure your page with clear sections; good UX is good SEO.

Can I anchor to a specific block instead of a whole section?

In 7.1, the supported, reliable method is to assign an ID to the section. If you need finer control, place the content at the top of its own section and anchor that section. Combine with scroll-margin-top for precise alignment so headings don’t sit under a sticky header.

Why does my anchor link work on desktop but not on mobile?

Most often it’s either a different header height on mobile or a path mismatch (for example, linking to a section that exists only on the desktop version). Increase scroll-margin-top a bit and verify that the mobile layout still includes the section with the same ID. Also confirm the page slug and path are correct.