Adding index page anchor links in version 7.0

Last updated February 12, 2025

In version 7.0, stacked index pages have a unique URL structure you can use to create anchor links (or "page jumps") without custom code. These anchor links take you to specific places on the index page. 

For example, when you click the View our work button on the Hayden template's demo site, it scrolls down the page to the "Moreau" section.

Accessing this feature

This guide is for index pages on version 7.0. For adding anchor links on version 7.1, visit creating anchor links. For adding anchor links to layout pages in version 7.0, visit Manually creating anchor links in version 7.0.

Supported templates

Index page anchor links work best on templates with stacked index pages. In these template families, clicking an anchor link will scroll to that section of the index page.

  • Bedford
  • Brine - Ajax loading can conflict with anchor link behavior. As an alternative, use the built-in index navigation.
  • Pacific - You need to add -section to the end of the link. Review step 3 below to learn more.

Tip

Some grid indexes support a similar functionality. You can also use custom code to manually add anchor links on any template.

Step 1 - Find the slug

In the Pages panel, hover over the index section you want to link to. Click the gear icon to open page settings for that section.

Copy the slug from the URL slug field. You'll use this slug to create an anchor link.

Tip

The slug may display in the browser bar when visitors navigate to that section. You can change the slug by typing new text in this field.

Adding_Index_Page_anchor_links.png

Add the link that visitors will click. You can use any type of link, but we'll use a text link as an example.

In a text block, highlight the text and click the link icon in the text block toolbar.

Tip

Each template's index has unique options. To learn more, visit the guide for your template's family: Bedford, Brine, or Pacific.

Step 3 - Add the page slug

Next, follow these steps:

  1. In the URL field, paste the slug you copied in step 1.
  2. Add a hashtag symbol (#) to the front of the slug to complete the link. The anchor link in this example is #hours-and-location.
  3. Switch the Open link in new tab toggle off.
  4. For the Pacific, Charlotte, Horizon, and Naomi templates only, add -section to the end of your anchor link, like this: #hours-and-location-section
  5. Press Enter.

Step 4 - Add the index slug

If you created your link in step 2 on a section in the same index page, you can skip this step.

For any other link, like navigation links or links on other pages, include the index page's slug before the anchor link. This will ensure your links work from:

  • A different page.
  • Your site's navigation.
  • A subpage's direct URL.

To add this:

  1. Copy the slug for your index page from its page settings.
  2. Reopen the link editor.
  3. Add the page slug before the anchor link between two / symbols, like this:
/indexslug/#pageslug
  1. Press Enter.

Examples

Add anchor links to multiple sections to help visitors navigate around your index page. This example uses the Brine template and three different link types: button block, text link, and image clickthrough URL.

Examples of anchor links in the Brine template using a Button Block, a text link, and an image clickthrough URL.

Create a navigation by arranging anchor links side by side. This example uses the Bedford template and text links.

Examples of anchor links in the Bedford template arranged side by side.

These template families with grid index pages support a similar built-in option:

  • Avenue
  • Flatiron
  • Montauk

You can create an index page anchor link in these templates using the following URL format:

/index-page-slug/#/page-slug

This is a good option for linking to pages in the index from your site navigation or other pages on your site. The page opens with any Index-specific formatting, the same way it would if you clicked its featured image on the index.

This example uses the Avenue template.

Example of anchor link behavior in a grid Index Page.

Troubleshooting

If an anchor link isn't working, these tips may help:

  • If necessary, ensure you added the index page slug as described in step 4, including the two / symbols. This is required for navigation links and links from other pages.
  • If you're noticing issues on mobile and your template is in the Brine family, try temporarily disabling Ajax to check if that's causing the issue.
  • Ensure the index page slug and section page slug are correct. If you changed either of these, you'll need to update the anchor link manually.
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.

Adding index page anchor links in version 7.0