An anchor link ("page jump") is a special URL that takes you to a specific place on a page. For example, the table of contents in this guide contains anchor links that take you to each header.
This guide explains how to use HTML code to add an anchor link to a Squarespace 5 site.
Step 1 - Create a link with a unique ID
Add the link that visitors will click. You can use any type of link, but this example shows a text link.
Click Direct URL. In the Link Location field, enter a hashtag followed by your unique ID.
- The unique ID in the example below is anchor-link-example.
- The text can be anything you want, but can't include spaces. Separate words with a dash instead.
- Unique IDs are case-sensitive and can only be used once per page. See our best practice tips for more help.
When you're done, click Save & Close.
Step 2 - Link the unique ID to a section on your page
In the page editor:
- Scroll to the section you want the link to take visitors to.
- Create a new line and click to move your cursor to that line.
- Click the
to add a code snippet.
to add a Copy and paste this tag formula into the code snippet field:
<p id="CODE">TEXT</p>
Then:
- Replace CODE with the unique code from Step 1. Don't include the hashtag.
- Replace TEXT with the text you want to display on the page.
Tip: You can also format the text.
Here's an example of what that might look like:
When you're done, click Save & Close. The link you created in Step 1 will now take visitors to the text you set in Step 2.
Format the landing text
To format the landing text as something other than body text, update the <p> and </p> tags. That means changing the the first and last p in the code from Step 2 to something else. If you aren't familiar with HTML, try using Heading 1 tags: h1
Here's an example showing Heading 3 tags:
Link to another page / navigation links
If you're linking to another page, or adding your link to the navigation:
- Set up your anchor link as you did in Step 1.
- Add a / symbol, the page slug, and another / symbol before the unique ID, like this: /pageslug/#uniqueID
Here's an example of what that might look like:
Link to the top
To link to the top of the page, link to the header using Code Injection.
- Add text and an anchor link to the page or footer as described Step 1. You may want to use "Back to top" as the text, and #top as your unique ID.
- In the Website Management Bar, click Website Settings under Advanced.
- Click the Code Injection tab.
- Use the drop-down menu to choose Extra Header Code.
- In the HTML Code field, copy and paste this code: <a id="top"></a>
- If you used a unique ID other than #top when setting up the link, ensure you replace it in the first <a> tag.
- Click Update Information.
Limitations and best practices
Anchor links can be a powerful tool for helping visitors navigate through your site, but it’s good to keep some things in mind.
An ID can only be used once on each page
For example, once you use the ID "panda" on your homepage, you can't add "panda" as an ID later on your homepage. You could use it on a different page, but not a second time on your homepage.
IDs are case sensitive
If your HTML says id="Panda", but your link lists the ID as #panda, your link won't work.
The unique ID becomes part of the URL after clicking the anchor link
When a visitor clicks an anchor link, the unique ID shows up at the end of the site’s URL.
You can use any text for your unique ID
Creating a memorable ID can streamline the setup process and help you troubleshoot, should something go wrong. Memorable IDs are often ones that make logical sense, for example, using #top for a “Back to top” link.
Anchor links can also be a way of adding humor and personality to your site. Keep in mind that visitors will see the ID at the end of the URL.
The section you link to will display at the top of the browser
The landing text displays at the top of the browser, or as far up as it can go if there isn't much content beneath it.
If you don't want your text to be at the very top of the browser window, you can create space before it by adding <p> tags with non-breaking spaces to the landing text copy. In HTML a non-breaking space is
Every set of <p> </p> tags you add before the text adds an extra line break. See the images below for reference.
Troubleshooting
If an anchor link isn't working, these tips may help:
- For navigation links and links from to other pages, ensure you added a page slug.
- Ensure that the unique ID is exactly the same in your link and the landing text. If there's any difference in spelling or capitalization, the link won’t work.
- Ensure your landing text HTML is set up correctly. For example, if your unique ID is #bamboo, the link you’ll add to the landing text HTML is id=“bamboo”
- The anchor link won’t work if your page is already using that ID. Try using a different ID or changing the capitalization.
Note: While Squarespace's Customer Care team can help with the steps in this guide, they can't provide directions for additional code modifications. If you need more help, we recommend exploring our list of resources to help with HTML.