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, collection page 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

Add the link that visitors click to get to the content you created in step 1. You can use any type of link, but this example uses a text link:

1. In a text block, type the text you want to link, highlight it, and click the link icon in the text block toolbar.
2. Under URL, add the full URL for the page (even if it's the same page), and an additional slash mark. It should look like this:

   https://examplesite.com/pageslug/

3. After the page slug, enter a hashtag (#) followed by the unique ID from step 1. It should look like this:

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

4. If you want the link to open in a new tab, switch the Open link in new tab toggle on.
5. Press Enter.

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

Click Save to publish your changes. The link you created in Step 2 now takes visitors to the text you set in Step 1.

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:

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 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 same 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:

<p id="unique-id"></p>

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 or bottom of a page

To link to the top or bottom of the page, link to the header or footer using code injection. Code injection is a premium feature.

Link to the top

Linking to the top of a page is useful if your page content is long and you want to give visitors an easy way to return to your navigation. To link to the top of a page:

1. 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.
2. Open the Code Injection panel.
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 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.

Link to the bottom

Linking to the bottom of a page is useful if you want visitors to find information or interact with something in your footer, like a newsletter block.

To link to the bottom of a page:

1. Add text and an anchor link anywhere in the content of the page 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 Go to footer as the text, and #bottom as your unique ID.
2. Open the Code Injection panel.
3. In the Footer field, add this code: <a id="bottom"></a>. If you used a unique ID other than #bottom when setting up the link, ensure you replace it in the first <a> tag.
4. Click Save.

This method links to the footer on each page throughout your site.

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. Ensure your unique ID is something you don't mind being visible to visitors.

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.

Linking to sections that don't support blocks

You can't directly link to some section types, like gallery sections or auto layouts, because you can't add blocks to those sections. However, you can create a similar effect by following these steps:

1. Add a blank section above the section you want to link to.
2. Follow the steps above to add your code block to the blank section and set up the anchor link.
3. To avoid a gap created by the blank section, click the blank section, then Edit Section, and toggle Fill Screen off.

Keep links updated

If you change your primary domain or update the page slug in the future, update your anchor links as well. Anchor links won't work correctly if they use outdated URLs.

Troubleshooting

Anchor link not working

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.

Anchor link jumps below the code block

If your site's header has Fixed Position enabled, an anchor link may appear to jump below the code block with your unique ID. To prevent this, switch the Fixed Position toggle off, or add some space below the code block and above the content you want the anchor link to go to.

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:

• Learn best practices for adding custom code.
• Read our general guide on third-party customizations.
• Visit Squarespace Forum, our customer and developer community.
• Hire a Squarespace Expert to help build custom code for your site.

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:

• Brine
• Farro
• Tremont
• York

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.