Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Creating anchor links

An anchor link (or "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 covers how to add anchor links to any block section on your site with a Code Block.

Step 1 – Create a link

Add the link that visitors will click. You can use any type of link, but this example uses a text link.

In a Text Block, type the text you want to link, highlight it, and click the Link icon in the Text Block toolbar.

Step 2 - Add the URL and page slug

For certain anchor links, this step is optional, but we recommend it for most links.

In the web address field, add:

  1. Your site's URL
  2. The slug for the page you're linking to (even if it's the same page)
  3. An additional slash mark (/)

It should look like this:

https://examplesite.com/pageslug/

Click the gear icon to ensure Open in New Window is disabled if you want visitors to stay on the same page.

Tip: If you change your primary domain or update the page slug in the future, update the anchor link as well.

Step 3 - Create a unique ID

After your page slug, enter a hashtag (#) followed by text. The text you create is your unique ID.

  • The text for your unique ID 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.

After adding the unique ID, the URL should look like this:

https://examplesite.com/pageslug/#unique-id

Click Apply to save your link.

Step 4 - 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 and add a Code Block.

Replace the words Hello, World! with the text you want on the page. Then add

id="unique-id"

inside the first tag, inserting your own unique ID between the quotation marks, like this:

<p id="unique-id">This is where the link will jump to</p>
Tip: Don't include the page slug or hashtag from your anchor link.

code-block-example.jpg

Click Apply.

Step 5 - Save

Hover over Done, then click Save. The link you created in Step 1 will now take visitors to the text you set in Step 4.

Use different types of links

The example above uses body text for the anchor link in Step 1, but you can use any type of link, including buttons and image clickthroughs. Visit Adding links to your site to learn about different link options.

For all link types, add the URL and create the unique ID as shown in Step 2 and Step 3 above, using this format:

https://examplesite.com/pageslug/#unique-id

Format the landing text

To format the landing text as something other than body text, change the <p> and </p> tags in Step 4. If you aren't familiar with HTML, try using Heading 1 tags: <h1> </h1>

When using different tags, add the unique ID the way you did in Step 4:

format-text-as-h1s.jpg

Page slugs and anchor links

We recommend adding the URL and page slug before the unique ID in most cases. If an anchor link doesn't have the page slug, it won't work:

  • In Internet Explorer
  • If your link is a navigation link
  • If you're linking to another page

Anchor links without the site URL may also have issues in Safari mobile browsers. To find your page's URL, visit URL slugs.

If you know none of your visitors use Internet Explorer or the Safari mobile browser, and you're linking to a place on the same page (for example, scrolling down to a lower header), you can use the #unique-id in your link without the page slug or URL.

Tip: To see which browsers your visitors use, view the Traffic Analytics panel. 

Link to the top

To link to the top of the page, link to the header using Code Injection. Code Injection is a premium feature.

  1. Add text and an anchor link to the bottom of the page or the footer as described Step 1 through Step 3, but don't include the URL for your site or a slash mark (/) before the unique ID. You may want to use Back to top as the text, and #top as your unique ID.
  2. In the Home Menu, click Settings, click Advanced, then click Code Injection.
  3. In the Header field, add 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.
  4. Click Save.

This method makes it possible to link to the top of each page throughout your site. You can use the same process to link to the top of a single page by adding the code to the page's advanced settings.

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, after 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.

Troubleshooting

If an anchor link isn't working, ensure:

  • You've added a page slug as described in Step 2, including the two / symbols. This is especially important for navigation links, links from other pages, and in Internet Explorer.
  • 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.
  • The 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”
  • You've added www. at the beginning of your URL if your primary domain includes it.

In these cases, the anchor link won't work even if everything is set up correctly:

  • If it uses your site's built-in domain and you test it while logged in. Test it in an incognito browser instead.
  • If the page already uses that ID. Try using a different ID or changing the capitalization.
Note: While Customer Support can help with the steps in this guide, we can't provide directions for additional code modifications. If you need more help, we recommend exploring the Squarespace Forum, or our list of resources to help with custom code.

Ajax and anchor links (version 7.0)

On version 7.0, Ajax is a special method for site loading which makes content-heavy pages much faster and more nimble. However, it can interfere with anchor link functionality, especially on mobile devices.

If the above troubleshooting steps aren't working and your template supports Ajax, temporarily disable it in Site Styles to see if that is causing the issue. Ajax is available in these template families:

  • Brine
  • Farro
  • Tremont
  • York

Index Page anchor links (version 7.0)

On version 7.0, stacked Index Pages have an alternate way to add anchor links that doesn't require code. To learn more, visit Adding Index Page anchor links.

Was this article helpful?
135 out of 302 found this helpful