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
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
#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
Offsetting all anchor links
