Anchor links, or “page jumps,” take visitors to specific areas on a page. You can add this type of link to Regular Pages using custom HTML code.
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: Business and Commerce plans
- Available in: Personal plan for websites active before December 1, 2017
- Not available in: Personal plan for websites active after December 1, 2017
- Trial: You can use Code Blocks during a trial.
To learn more, visit Premium features.
Tip: You can add anchor links to certain Index Pages without custom code. To learn more, visit Adding Index Page anchor links.
Step 1 – Create a link with a unique ID
To create the anchor link that visitors will click, add a Text Block to the page and enter the text for your link. Highlight the text and click the link icon in the Text Block Editor.
In the link window, enter a hashtag followed by text. The text you create is your unique ID. Ensure Open in New Window is unchecked, as you want visitors to stay on the same page.
The unique ID in this instance is anchor-link-example. The text can be anything you want, but can't have spaces. Separate words with a dash instead.
Tip: Unique IDs are case-sensitive.
Note: Internet Explorer handles anchor links differently than other browsers. If many of your visitors use Internet Explorer, add the page slug before the hashtag as if you were linking to a different page.
Step 2 - 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 hashtag (#) from your anchor link.
Click Save. The link you set in Step 1 will now take visitors to the text you set in Step 2.
Using different types of links and landing text
The example above uses body text for both the anchor link and the section it jumps to, but there are many other options.
You can use any type of link, including buttons and clickthrough images, as your anchor link. Visit Adding links to your site to learn about different link options.
For all link types, create the unique ID as you did in Step 1 above, using the format #word as the link, but replacing word with a unique ID.
Tip: We don’t recommend adding anchor links to your navigation using a navigation link, as the links will display but not work on pages that don’t include the corresponding landing text. Also, navigation anchor links don’t work reliably on mobile devices.
If you want to format the landing text to something other than body text, change the <p> and </p> tags in Step 2 before adding the unique ID. If you aren't familiar with HTML, one suggestion would be using header 1 tags: <h1> </h1>
When using different tags, add the unique ID to the first tag the way you did in Step 2 above, using the format id=“word” but replacing word with your unique ID.
Anchor links to different pages
To create an anchor link to a section on a different page, add the URL slug for the page you're linking to before the hashtag and unique ID in your link.
Tip: You can also add the page slug for the current page to make your anchor links Internet-Explorer friendly.
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.
Create the landing text on the page you're linking to the same way you did in Step 2, above. This example uses <h1> tags instead of <p> tags.
Anchor links to the top
To link to the top of your page, link to the header using Code Injection.
- 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.
- 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.
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 your About 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.
Anchor links may not work on sites where Ajax is enabled
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. If your template supports Ajax, you may need to disable it in the Style Editor to get anchor links to work.
Ajax is currently available in the following templates. Templates are grouped by family.
- Brine, Aria, Basil, Blend, 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, Haute
- Tremont, Camino, Carson, Henson
- York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori
If an anchor link isn't working, these tips may help:
- Ensure that the unique ID is exactly the same in your link and the landing text. If there is any difference in spelling or capitalization, the link won’t work.
- Ensure your link and landing text HTML are set up correctly. If your unique ID is bamboo, the link is #bamboo and you’ll add id=“bamboo” to the landing text HTML.
- The anchor link won’t work if your template is already using that ID. Try using a different ID or changing the capitalization.
- Anchor links work differently in Internet Explorer. To ensure anchor links work for all browsers, add the page slug before the hashtag in the link as if you were linking to a different page.
- 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.
- If your template supports Ajax, temporarily disable it to see if that is causing the issue.
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.