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.
Before you begin
- Stacked Index Page anchor links only work when you're viewing the main Index Page. They won't work if you're viewing an individual page from the Index via the direct URL.
- We don't recommend adding Index anchor links to your site navigation. These links won't work on mobile. They also won't work if the visitor is on any page other than the Index.
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, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne||As an alternative, use the built-in Index navigation.|
|Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift||Displays each section's page slug in the URL as you scroll over it.|
|Pacific, Bryler, 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 (except navigation links). 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, Bryler, Charlotte, Fulton, Horizon, and Naomi templates only, add -section to the end of your anchor link, like this: #page-name-section
- Click Save.
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.
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.
Creating anchor links on other pages
You can add anchor links on any page by creating custom code and adding it to a Code Block.
Adding code to your site is an advanced modification that falls outside of the scope of Squarespace support. We recommend that you have coding knowledge to add any code to a Code Block.
For help adding anchor links to other pages, visit Creating anchor links.