How to Add Anchor Links in Squarespace (2025)
Wondering how to create a link that jumps to a section further down your page? This tutorial will show you how to add an anchor link, including how to utilise Squarespace’s new feature for sites on 7.1.
In this guide:
⚓ What is the purpose of an anchor link?
An anchor link, aka jump link, directs users to a particular section of a page, acting like a bookmark or shortcut.
The purpose of an anchor link is to help visitors find internal information faster. It improves the user experience.
If you want your visitors to browse your website for longer, consider adding anchor links to sections that you think are of most interest to them. These special links can be added to your paragraphs, headings, buttons and/or navigation menus.
I regularly include a table of contents with anchor links near the top of my blog posts (see above ☝️). They’re especially useful when your page content is long or if your site has a lot of information, hello membership organisations and informational websites.
A one-page portfolio website is another example where anchor links can be crucial for navigation. In this scenario, anchor links may be added to the header navigation, so users can jump to explore the section they’re most interested in.
Here are a couple of example of what anchor link formats look like:
www.website.com/#about
www.website.com/blog/blog-post-title#tips
The anchor is the portion of these URLs that begins with a #.
How to “name” your anchor links
We “name” each anchor link so that it has a unique web address that we can point to. Follow these tips to choose your anchor name:
Anchor links on the same page must have a unique identifier/ID. But it’s fine to use the same anchor name on different pages.
IDs should be short; 1–2 relevant keywords is best.
Letters and numbers are allowed.
It cannot contain spaces. You can use a dash (-) between words instead to make it more readable, e.g. #self-tapes.
How to create an anchor link with Fluid Engine
In early 2025, Squarespace released a version 7.1 update that makes adding section anchor links much simpler than before!* Here’s how:
STEP 1. Create a section anchor link
Hover over the section that you want to set an anchor for and click Edit Section.
Scroll down to the Anchor link field.
Type in the custom name/ID for your anchor after the # prefix. Squarespace takes care of the hashtag for you.
Click Save in the top left corner of the editor.
STEP 2. Direct a link to the anchor
You now need to create a link that points to the anchor link—the other end of the telephone so to speak. Create a link as you normally would in Squarespace.
In the field where you enter the URL, type in a # followed by the anchor name.
E.g. #contact
An anchor link being added to a button in Squarespace
This format will work for pointing links that are on the same page as the section anchor link. You’ll have to use a different format if your anchor link and “source” link are on different pages of your website.
See below: How to add anchor links across pages or to navigation menus
Pro Tip: As this is an internal link, be sure to maintain the same logic as other internal links on your website. I.e. if all of your internal URLs load in the same tab, then toggle off Open link in new tab. Squarespace doesn’t toggle anchor links off automatically like it does with other internal links.
*This new feature will not interfere with any anchor links previously created with code blocks in Fluid Engine.
How to create anchor links for blog posts in Squarespace
Squarespace blog posts use the classic editor, so the process for creating an anchor identifier or ID (URL) is different to Fluid Engine. It’s a straightforward process, but requires adding a line of HTML. Here’s the code to copy and paste! See what I did there?
How I do this is by inserting a code block between each of the sections of my article. The added benefit is that these code blocks naturally add section spacing without me needing to add a spacer block as well.
STEP 1. Add a code block
Hover over where you wish to insert a code block. Click the blue plus icon that appears.
Select Code from the block options.
STEP 2. Name the anchor link
Delete the sample code. Paste in the following HTML:
<a id='name-here'></a>
Replace the text inside the quotes with the name/ID of your anchor link.
Once done, exit out of the code block. Remember to also save your changes before exiting the editor.
STEP 3. Direct a link to the anchor
Finally, you need to create a link or button that points to the anchor link. Here’s how to add a link to copy/text:
Highlight the copy you wish to link.
Click the link button in the text toolbar or use the shortcut CMD + K (on Mac) or CTRL + K (on Windows).
Toggle off Open link in new tab.
Type # followed by the anchor ID.
Press Enter on your keyboard.
How to add anchor links across pages or to navigation menus
The key to ensuring your anchor links work correctly across pages is to include the URL (slug) of the page it’s on before the #.
Let’s look at an example of how to correctly create a link in your Squarespace main navigation that directs to a section anchor link.
To create a link in your main navigation, click the + next to Main Navigation > select Link.
In this example, I’ve already named the anchor for my showreel section to #showreel, which is part of my homepage.
For the link that sends people here, I would type into the link field in Squarespace /home#showreel.
Otherwise, without the page URL, if I happened to be on the page www.website.com/contact when I click the link, it would point me to www.website.com/contact#showreel, which doesn’t exist.
Two pointers:
As this is an internal link, maintain the same logic as your other internal links. I.e. if all of your internal URLs load in the same tab, then toggle off Open link in new tab. I mention this because Squarespace doesn’t toggle anchor links off automatically as it does with other internal links.
We drop the domain (e.g. www.website.com) from the URL.
Always test your links work in preview mode!
So whenever you are linking to an anchor link in your navigation menus (header/footer) or across pages, don’t forget to include the page slug in front of your anchor name.
