Anchor links, or “page jumps,” take visitors to specific areas within a page. You can add this type of link to any page using custom code, but you can also add this to some Index Pages without using code.
For example, when you click the “View Our Work” button on the Hayden Index Page demo content, it scrolls down the page to the linked Moreau section. The URL changes to include the page slug at the end: #moreau-hayden.
Index Page anchor links work best on templates with stacked Index Pages. In the following templates, clicking an anchor link will scroll to that section of the Index Page. Templates are grouped by family.
Note: Some grid Indexes support a similar functionality.
|Bedford, Anya, Bryant, Hayden|
|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||
When using Index Page anchor links with these templates, you may want to disable Ajax loading, as it can conflict with anchor link behavior.
As an alternative, use the built-in Index navigation.
|Pacific, Charlotte, Fulton, Horizon, Naomi||You must add -section to the end of the link. See Step 4 below for more information.|
Creating and adding the anchor link
In the Pages panel, hover over the page and click the to open Page Settings for the page in the Index you want to link to.
Copy the slug from the URL Slug field. You'll use this slug to create an anchor link.
Open a page in your Index and add a link. In the Hayden demo content, the link was added to a special banner button, but any type of link can work. Visit Adding links to your site to learn more about different link options.
Then follow these steps:
- Paste the slug you copied above in the External tab.
- Add a hashtag symbol (#) to the front of the slug. The anchor link in this example would be #el-panamericano-hayden. You don't need any other part of the URL.
- Ensure Open in New Window is unchecked.
- For the Pacific, Charlotte, Fulton, Horizon, and Naomi templates only, add -section to the end of your anchor link, like this: #page-name-section
- Click Save.
Note: Links outside the Index Page (such as navigation links) will need extra formatting.
The link now scrolls to that section of your Index Page.
See it in action
Create a navigation by arranging anchor links side by side. This example uses the Bedford template and text links.
Link from outside the Index
You can use a similar method to jump to Index sections from:
- Pages outside the Index
- An Index subpage's direct URL
- Your site navigation
To do this, format the link so it includes the Index, using this structure:
For example, if your Index Page's slug is Home, and your subpage's slug is Contact, the link will be:
If you're having trouble:
- You can see the Index Page's slug in Index Page Settings.
- If your template supports Ajax, you may need to disable it in the Style Editor to get these anchor links to work.
- If your links aren't working, try using the full URL for the link instead, for example: https://www.yoursitename.com/indexslug/#subpageslug
Index Page anchor links in other templates
These templates with grid Index Pages support a similar functionality:
- Montauk, Julia, Kent, Om
However, in these templates, the links don’t function any differently than clicking the thumbnail image for the page. This example uses the Avenue template.
Tip: You can add anchor links on any page by creating custom code and adding it to a Code Block. The Code Block is a premium feature available on certain plans. For more information, visit Creating anchor links.