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.

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
}