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.
There are two kinds of anchor links you can use on your site:
- Regular anchor links - A link that takes you to a specific place on any Regular Page or blocks-editable area. This requires a Code Block, which is a premium feature.
- Index Page anchor links - Stacked Index Pages have an alternate way to add anchor links that doesn't require code.
This guide explains how to add a regular anchor link.
The solution in this guide includes a Code Block. The Code Block is a Premium feature available in the current Website Business plan and higher:
- Available in: All Business and Commerce plans
- Available in: Legacy Personal plan (no longer available for new subscriptions)
- Not available in: Current Personal plan
- Trial: You can use Code Blocks during a trial.
To learn more, visit Premium features.
Step 1 – Create a link
Step 2 - Create a unique ID
In the External tab of the link window, enter a hashtag followed by text. The text you create is your unique ID. Ensure Open in New Window is unchecked if you want visitors to stay on the same page.
- 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.
Step 3 - Add the page slug
Before the hashtag, add the slug for the page you're linking to (even if it's the same page) and an additional backslash, like this:
Tip: If you update the page slug in the future, update the slug in the anchor link as well.
Step 4 - Link the unique ID to a section on your page
In the Page Content editor, scroll to the section you want the link to take visitors to. Click an Insert Point and select the Code Block.
Replace the words “Hello, World!” with the text you want on the page. Then add
inside the first tag, inserting your own unique ID between the quotation marks, like this:
<p id="anchor-link-example">This is where the link will jump to</p>
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 clickthrough images. Visit Adding links to your site to learn about different link options.
Here's an example of an anchor link in a Button Block:
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 header 1 tags: <h1> </h1>
When using different tags, add the unique ID the way you did in Step 4:
Link to the top
- Add text and an anchor link to the page or footer as described Step 1 through Step 3. 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, and 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.
Tip: You can use the same process to link to the top of individual pages.
Page slugs and anchor links
We recommend adding the 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.
To find the page’s URL slug, click on the for the page in the Pages panel. In the Page Settings panel that opens, locate the URL Slug field. You can also see it in full preview or when viewing your site in incognito mode.
If you know none of your visitors use Internet Explorer, 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 formatting without the page slug.
Tip: To see which browsers your visitors use, view the Traffic Overview Analytics panel.
Ajax and anchor links
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 your template supports Ajax, temporarily disable it in the Style Editor to see if that is causing the issue.
Ajax is available in the following templates. Templates are grouped by family.
- Brine family - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
- Farro family - Farro, Haute
- Tremont family - Camino, Carson, Henson, Tremont
- York family - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York
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.
If an anchor link isn't working, these tips may help:
- Ensure you added a page slug as described in Step 3, including the two / symbols. This is especially important for navigation links, links from other pages, and in Internet Explorer.
- If you're seeing issues on mobile, you may need to disable Ajax.
- 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 template is already using that ID. Try using a different ID or changing the capitalization.
- Squarespace Index Pages often have their own built-in anchor link functionality, which may conflict with the anchor links you’re adding. For more information, visit Adding Index Page anchor links. If anchor links aren’t working properly on your Index page, 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 the Squarespace Answers community, or our list of resources to help with custom code.