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
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:
- Your site's URL
- The slug for the page you're linking to (even if it's the same page)
- An additional slash mark (/)
It should look like this:
If you're adding anchor links to your homepage, you don't have to include the slug. If you change your homepage, add the slug to any anchor links you created on the old homepage or they won't work correctly.
Click 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:
Click Save, then 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.
In the code field, add:
<p id="unique-id">This is where the link will jump to</p>
Inside the first tag, replace unique-ID between the quotation marks with your specific unique ID. Replace This is where the link will jump to with whatever text you want to display on your site here.
Tip: Don't include the page slug or hashtag from your anchor link.
Step 5 - Save
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.
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:
The anchor link works even without visible text. If you don't want visitors to see text at your landing point, format the landing text with nothing between the tags:
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
- 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.
- In the Home menu, click Settings, click Advanced, then click Code Injection.
- 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.
- 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
Every set of <p> </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, 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 your site is set to private and you test the anchor link while logged in. Set a site-wide password for your site instead and test in an incognito browser.
- If the page already uses that ID. Try using a different ID or changing the capitalization.
Note: Custom code modifications fall outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. Custom code can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:
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:
Index page anchor links (version 7.0)