Send visitors to a specific part of a page.
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 heading.
This guide covers how to add anchor links to any block section on your site with a code block.
Watch a video
Step 1 - Add a code block
In the page editor, scroll to the section you want to link to and add a code block. You can add it to any block section, but not other section types like gallery sections or auto layouts, as it's not possible to add blocks to those sections.
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 a specific unique ID for your link:
- 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. Review our best practice tips for more help.
Replace This is where the link will jump to with whatever text you want to display on your site.
Step 2 - Create the link
- In a text block, type the text you want to link, highlight it, and click the Link icon in the text block toolbar.
- In the web address field, add the full URL for the page (even if it's the same page), and an additional slash mark. It should look like this:
- After the page slug, enter a hashtag (#) followed by the unique ID from step 1. It should look like this:
- If you want the link to open in a new tab, click and enable Open in New Window.
- Click Save, then click Apply to save your link.
For certain anchor links, including the full website address is optional, but we recommend it for most links.
Tip: If you're adding anchor links to your homepage, you don't have to include the page 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.
Step 3 - Save and publish
Use different types of links
The example above uses body text for the anchor link in Step 2, 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 the unique ID as shown in Step 2 above, using this format:
Format the landing text
To format the landing text as something other than body text, change the <p> and </p> tags in Step 1. If you aren't familiar with HTML, try using heading 1 tags: <h1> </h1>
When using different tags, add the unique ID to the code the way you did in Step 1:
<h1 id="unique-id">This is where the link will jump to</h1>
Link to a blank space
The anchor link works even without visible text. If you don't want text to appear 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:
- 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 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 in Step 2, 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.
- Open the Developer tools panel.
- 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 links 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 instead.
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.
Keep links updated
If an anchor link isn't working, ensure:
- You've added the URL as described in Step 2, including the page slug and two / symbols. This is especially important for navigation links and links from other pages.
- 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"
- The quotation marks in your landing text HTML are "straight" quotes, like in the examples in this guide. "Curly" or "smart" quotes won't work in the code block. The code block defaults to "straight" quotes, but you may have "curly" quotes if you copied and pasted code into the block.
- You've added www. at the beginning of your URL if your primary domain includes it.
- You're testing it while logged out or in an incognito browser. Clicking an anchor link while logged in may work in some cases, but it's not a reliable test for what your visitors will experience.
Even if everything is set up correctly, the anchor link won't work if:
- It uses your site's built-in domain and you test it while logged in. Test it in an incognito browser instead.
- 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.
- 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:
Anchor links on mobile
Depending on the device and browser, anchor link behavior varies on mobile. For example, when your anchor link includes the full URL as we recommend, the browser may reload the page at the landing point instead of instantly jumping down to the landing point.
If you prefer different anchor link behavior on mobile, you can try alternative formats for the anchor link, such as /pageslug#unique-id or #unique-id, but keep in mind these formats may not work for certain setups or in certain mobile browsers, like the Safari mobile browser.
To learn more, review Page slugs and anchor links.
Anchor links on version 7.0
If your site is on version 7.0, there are some special considerations to make when setting up anchor links.
Ajax and anchor links
Ajax is a special method for site loading which makes content-heavy pages much faster. However, it can interfere with anchor links, especially on mobile devices.
If the above troubleshooting steps aren't working and your template supports Ajax, temporarily disable it in site styles to check if it's causing the issue. Ajax is available in these template families:
Index page anchor links
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.