Squarespace Anchor Links: How to Add and Use Them

To add a Squarespace anchor link, click Edit Section on the section you want to scroll to, find the Anchor Link field in the settings, and give it a short name. Then paste that name into a button or link as /#yourname.

Name the destination section first

Anchor links work backwards from how people expect. You set up the destination first, then point things at it.

Find the section you want visitors to land on. Hover it and click Edit Section.

Scroll down the settings panel and you'll find a field called Anchor Link. Type a short name in it. This becomes part of the URL, so keep it lowercase, use hyphens instead of spaces, and make it descriptive: pricing, book-a-call, faq.

If you have several anchors on one page, make sure each name is unique. Two sections with the same anchor name means the browser picks one and you won't reliably get the one you meant.

There's a copy icon to the right of the field. Click it to copy the link.

Pointing a button at your Squarespace anchor link

Now go to the button, text link or image you want to trigger the scroll.

/#pricing, with a forward slash, then a hash, then your anchor name.

Save the block and save the page. Clicking the button should now scroll smoothly down to the section instead of jumping.

If it jumps instead of scrolling, that's usually fine, since smooth scrolling depends on the browser and the visitor's motion settings.

Linking to a section from a different page

This is the part the basic version leaves out, and it's the one people actually need.

/services#pricing.

Same rules as before, just with the page slug leading. This is how you build a nav link that drops a visitor straight into the relevant part of a long page, which is worth doing on any page long enough that people scroll past what they came for.

When the anchor doesn't work

Four things go wrong, in roughly this order of likelihood.

#pricing/#pricing.

The anchor name has a space or a capital letter in it. Stick to lowercase and hyphens.

Two sections share the same name, so the browser picks the first one it finds.

Or the section lands under your header. A fixed header overlaps the top of the target section, which makes it look like the anchor missed. That's fixed with a line of CSS setting scroll-margin-top on your sections, and it's the sort of thing I set up as standard on client builds.

Where anchors earn their keep

The obvious use is a long sales page where the top button jumps to the form. That works and everyone does it.

The less obvious ones are better. A sticky nav on a one-page site, where each item scrolls to a section. A contact button in the header that drops to your booking form. A table of contents on a long post, like the one on this page.

They're also useful in email and social links, since you can send people straight to the relevant part of a page rather than the top of it.

Frequently asked questions

What is the correct format for a Squarespace anchor link?

Use /#anchorname for a section on the same page, and /page-slug#anchorname to link to a section on a different page. The leading slash matters.

Why does my anchor link land in the wrong place?

Usually your fixed header is covering the top of the target section. A small amount of scroll-margin-top CSS on your sections fixes it.

Can I link to a section on another page?

Yes. Put the page path before the hash, like /services#pricing.

Do anchor links affect SEO?

Not negatively. Google can index and even link directly to sections, and anchors improve navigation on long pages, which helps engagement.

Got a long page that needs proper navigation rather than endless scrolling? Book a free call and we can sort the structure out.

I'm Dylan, the designer behind Highr Labs and a Squarespace Circle Platinum Partner. I build custom Squarespace sites for businesses in Utah and across the US. More about me, or book a free call if you want to talk through a project.