How Do You Add Anchor Links in Squarespace?

To add anchor links in Squarespace 7.1, edit the page, hover over the section you want to jump to, click Edit Section, type a slug in the Anchor Link field, copy the URL it generates, and paste that URL into any button, text link or navigation item. The link looks like /pageslug#slug and works from other pages too. That built-in field arrived in 2025 and replaced the old code block trick, which is why half the tutorials you find still tell you to paste <div id="..."> into a block. Both methods, plus smooth scrolling, the sticky header offset problem, anchor links in the menu and the 7.0 method, are below.

How do you add anchor links in Squarespace 7.1?

1. Click Edit on the page and hover over the section you want visitors to land on.
2. Click Edit Section (the pencil).
3. Find Anchor Link in the section settings and type a slug, for example pricing. Squarespace adds the # for you and turns spaces into dashes.
4. Click the copy icon next to the field. The copied URL is the full address, like https://yoursite.com/services#pricing.
5. Go to the button, text or image you want to link from, open its link settings and paste the URL. For a link on the same page, #pricing alone also works; for a link from another page, use /services#pricing.
6. Save.

Squarespace’s anchor links guide lists the sections that support the field: block sections, auto layouts, course, gallery and video sections. Blog, events, portfolio and store sections do not have it; the workaround is a blank section directly above the unsupported one, with the anchor set on that.

How do you add an anchor link to the navigation menu?

1. Open Pages and click the + next to Main Navigation.
2. Choose Link, give it a title such as Pricing, and paste /services#pricing as the URL.
3. Drag it into position in the menu and save.

This is how a one-page site gets a menu that jumps to Services, About and Contact sections. Set an anchor on each section, add one link item per section, and the menu works from the page itself and from any other page.

How do you make anchor links scroll smoothly?

By default the jump is instant. One line in Website, Website Tools, Custom CSS makes it scroll:

html {
  scroll-behavior: smooth;
}

Smooth scrolling also makes the sticky header problem obvious, so add the next snippet at the same time.

Why does the anchor link land under the header?

Because a fixed header sits on top of the page, and the browser scrolls the section’s top edge to the top of the window, where the header covers it. The fix is scroll-margin-top on the section, set to roughly your header height:

.page-section {
  scroll-margin-top: 90px;
}

Measure the header (right-click it, Inspect, read the height) and adjust the number. If the header is only fixed on desktop, put the rule inside a @media (min-width: 768px) block.

How did anchor links work before the Anchor Link field?

With a code block, and the method still works on every version:

1. Add a Code block at the top of the section, set to HTML.
2. Paste <div id="pricing"></div>.
3. Link to #pricing or /services#pricing as above.

Use it when the section is one of the unsupported types, or on Squarespace 7.0, where the field does not exist. 7.0 index pages on some templates (Brine family) give each stacked page its own anchor automatically, using the page’s URL slug after the hash: /#about. Another route on any version is the section’s own ID, which every section already has: right-click the section, Inspect, read the id on the section element, and #that-id is a valid anchor without adding anything.

Can you add anchor links inside a blog post?

Yes, with the code block method, because blog post bodies do not have the Anchor Link field. Add a code block with <div id="step-3"></div> above each H2 (see how many H2 tags a page should have for the heading pattern) and link to them from a table of contents at the top. A table of contents built this way is one of the few ways a long Squarespace post can offer jump links, and Google occasionally shows them under the result.

Why is the anchor link not working?

Anchor links are the small detail that makes long service pages usable, and they pair well with the Squarespace CSS tips and tricks on this site, the button colour guide for the buttons that trigger them, and the way I structure long pages in Squarespace website design work.

Frequently asked questions