How anchor links work

An anchor link has two parts: the anchor point (a slug you assign to a page section) and the link itself (what the visitor clicks). When someone clicks the link, the browser scrolls to the corresponding section on the page.

You've seen these on sites with a "Jump to Section" menu at the top of a long article, or a "Back to Top" button at the bottom. Same concept.

Step 1: Create the anchor link slug

In Squarespace 7.1, anchor links are set up at the page section level. You can add an anchor link to most section types, but not to blog, events, portfolio, or store sections. If you need to link to one of those, add a blank section directly above it and anchor that instead.

Here's how to set one up:

1. Click Edit on the page you're working with

2. Hover over the section you want visitors to land on and click Edit Section

3. Look for the Anchor Link field in the section editor

4. Type a short, descriptive slug. The field includes a # automatically, so just type the text portion. Spaces are converted to hyphens automatically

5. Click the Copy Link icon next to the field to copy the full anchor URL to your clipboard

6. Click Save

The copied URL uses your primary custom domain. If you haven't connected one yet, it'll use your built-in .squarespace.com domain.

A few rules to keep in mind: each slug can only be used once per page, slugs can't include spaces (they'll be converted to hyphens), and the # prefix is required but added automatically by Squarespace.

Step 2: Create the link

Once you have the anchor URL copied, you need to create the link that visitors will click. You can use any link type: text links, buttons, image clickthroughs, or navigation links.

Text link example:

1. Add a text block to the page (or edit an existing one)

2. Type the text you want to use as the link and highlight it

3. Click the link icon in the text toolbar

4. Paste the anchor URL you copied in Step 1 into the URL field

5. Press Enter to save the link

The pasted URL should look something like https://yourdomain.com/page-slug#section-name.

Button link: Follow the same process, but use a button block instead. Paste the anchor URL into the button's link field.

Navigation link: You can add anchor links directly to your site's navigation. In the Pages panel, add a new Link and paste the anchor URL. This is especially useful for one-page sites where your nav items point to different sections of a single page.

Linking to sections that don't support anchor slugs

Blog sections, event sections, portfolio sections, and store sections don't have the anchor link field. The workaround is straightforward:

1. Add a blank section directly above the unsupported section

2. Set up the anchor link on the blank section using the steps above

3. To avoid a visible gap, click the blank section, then Edit Section, and toggle Fill Screen off

4. Click Save

The anchor link now points to the blank section, which sits directly above the content you actually want to highlight. Visitors won't notice the blank section, and the scroll lands in the right spot.

Practical uses

Long-form pages. If you have a detailed services page or a comprehensive guide, add a list of anchor links at the top so visitors can jump to what they need. This is essentially a manual table of contents.

One-page websites. If your site is a single scrolling page, anchor links in your navigation menu let visitors jump between sections like a multi-page site. Your nav items might link to #about, #services, #contact, and so on. This approach is covered in more detail in 25 Best Practices for Building Sites with Squarespace.

FAQ pages. List questions at the top of the page as anchor links, with each answer in its own section further down. Visitors click the question they care about and jump straight to the answer.

Blog posts. While you can't add anchor slugs to blog sections directly, you can use the blank-section workaround above, or add anchor links manually within blog post content using code blocks if needed.

Troubleshooting

Anchor link not scrolling to the right place. Double-check that the slug in the anchor URL matches exactly what you entered in the section editor. Slugs are case-sensitive.

Link works on the same page but not from other pages. Make sure you're using the full URL (including your domain and page slug), not just #section-name. The full format is https://yourdomain.com/page-slug#section-name.

Duplicate slugs. Each anchor slug can only be used once per page. If two sections share the same slug, the link won't work correctly. Use unique, descriptive slugs for each section.

Fixed header covers the target section. If your site has a fixed (sticky) navigation bar, anchor links may scroll the target section behind the header. You can offset this with custom CSS:

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

Add this to your site's custom CSS under Design > Custom CSS and adjust the pixel value to match your header height.

Continue reading

For more Squarespace technical guides, check out How to Hide a Page From Squarespace Navigation or How to Connect a Custom Domain to Squarespace. If you're building a site from scratch and want a structure with anchor-ready sections already designed, browse the Studio Mesa template catalog.