How to Add Anchor Links In Squarespace (Easy Coding)
Anchor links, also known as jump links, let users instantly jump to specific sections within a webpage. You can link a button to a section in Squarespace with anchor links. They're a powerful tool for improving navigation, especially on long-form content or single-page Squarespace websites.
Let's dive into how to create and use anchor links on Squarespace.
Benefits of Anchor Links
Anchor links are commonly used on websites for call-to-actions on long pages, navigation within single-page websites, tables of contents, references to other pages, and "back to top" buttons. They enhance a website in several ways:
User Experience: Enable visitors to quickly find the content they're looking for, reducing scrolling fatigue.
Navigation: Direct users to key sections within a page for targeted information.
SEO: Anchor links can appear in search engine results, giving users a preview of your page's content structure.
How to Create Anchor Links in Squarespace
3 steps to create anchor links in Squarespace
Step 1: Add an Anchor (the target)
Navigate to the destination area where you want the link to jump to. Add a Code Block and copy the code below:
<div id="anchor-label"></div>
You can replace “anchor-label” with any other label describing the section, such as “pricing”, “services”...
Step 2: Create the Link (that triggers the jump)
Highlight the text or create a button that you want to trigger the anchor link. In the link settings, add the page URL followed by #anchor-label (notice the # symbol).
The link will look something like this: https://mywebsite.com/about#anchor-label
Step 3: Create a Smooth Scroll
From Squarespace Dashboard, go to Website > Website Tools > Custom CSS. Add the code snippet below:
html {
scroll-behavior: smooth;
}
Use Case: Table of Contents
There’s a small twist if you’re using anchor links for a table of contents: the anchor should be linked with a heading to get the SEO benefit. There are 4 types of headings in Squarespace (H1, H2, H3, H4).
To use the anchor links, you will use a code block to create the headings instead of the regular text blocks. Let’s say you need to add H2, your code block to add an anchor for it would look like this:
<h2 id="definition">Definition of Heritage</h2>
How to use anchor links for a table of contents
Conclusion
Anchor links in Squarespace are a breeze to set up. Play around with them a bit, and you'll be a navigation pro in no time!
