Using Anchor Links with Custom Code in Squarespace

Built-in anchor links for Squarespace are here! Using the Anchor Link input in the section editor, we can easily add unique anchor links to specific sections on our page.

Anchor Links in Squarespace

These anchor links are added as id attributes on the page section, which means we can target sections using #anchor-link instead of [data-section-id="123"], which is much much nicer.

Note

If you want to learn how to add anchor links within a section. Check out this article.

Targeting a specific page section by anchor link

#anchor-link {
  // CSS here
}

One quirk to the Squarespace anchor links though is that you can’t have the same anchor link twice on the same page (a big no-no in html land). So here is some code that allows you to target sections by a specific string in the anchor link text.

Targeting a multiple sections by anchor link string

[id*="anchor-link"] {
  // CSS here
}

Offsetting Anchor Links

You can also customize the anchor link offset. So when a user navigates to a specific section, you can offset the scroll amount using the scroll-margin property.

Offsetting a specific anchor link

#anchor-link {
  scroll-margin: 150px;
}

Offsetting all anchor links

[id] {
  scroll-margin: 150px;
}