Adding index page anchor links in version 7.0

Last updated June 28, 2024

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, or on other types of pages on version 7.0, visit creating anchor links.

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 must add -section to the end of the link. See Step 3 below for more information.

Tip

Some grid indexes support a similar functionality. You can also use custom code to add regular 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 these steps 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, see 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 added your link in Step 2 to a section within the same index, 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. Re-open the link editor.
  3. Add the page slug before the anchor link between two / symbols, like this:
https://examplesite.com/indexslug/#pageslug
  1. Press Enter.

Note

If your primary domain includes www. before your domain name, include that in your anchor link URL too.

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

  • 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 within 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 seeing issues on mobile and your template is in the Brine family, try temporarily disabling Ajax to see if that's causing the issue.
  • Ensure the index page slug and section's page slug are accurate. 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