Creating anchor links

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:

  1. Scroll to the section you want the link to take visitors to.
  2. Create a new line and click to move your cursor to that line.
  3. Click the gear-icon to add a code snippet.

Copy and paste this tag formula into the code snippet field:

<p id="CODE">TEXT</p>


  • 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:

  1. Set up your anchor link as you did in Step 1.
  2. 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.

  1. 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.


  1. In the Website Management Bar, click Website Settings under Advanced.
  2. Click the Code Injection tab.
  3. Use the drop-down menu to choose Extra Header Code.
  4. In the HTML Code field, copy and paste this code: <a id="top"></a> 
  5. If you used a unique ID other than #top when setting up the link, ensure you replace it in the first <a> tag.
  6. 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 &nbsp; 

Every set of <p>&nbsp;</p> tags you add before the text adds an extra line break. See the images below for reference.


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.
Was this article helpful?
0 out of 0 found this helpful