Add anchor links to “jump” where you want on a Squarespace page
In the Venezia one-page template, there is a navigation menu that seems like it’s for links to more pages. But it’s a one page template so how can that be?
The navigation menu links are links not to pages but what are called anchor links.
An anchor link “jumps” or scrolls you to a specific place on a page. This works especially well for links on one-page websites. This is also how a table of contents works on a page where you want to link, or jump, to that specific heading or place on the page. An anchor link can also jump to a specific place on other pages on the site as well.
Now that we know what an anchor link is, how do you create it?
(This works for both Squarespace 7.0 and 7.1, including Classic and Fluid Engine Editors. If you need to know more about what the heck is Fluid Engine click the link for that blog post. It’s not an anchor link though since it will just take you directly to a new page. 😉)
Here is a quick and easy tutorial on how to create an anchor link in Squarespace:
Even though this requires a little bit of code, it really is easy to follow the steps below and basically just copy and paste the code with just a word change.
If you’d like to see an example of anchor links in action, see the Venezia template demo here and click through the navigation to see how and where the anchors work and jump to :)
To add an anchor link, let’s first start with the </> code block.
For Squarespace 7.1 Fluid Engine,
(You’ll know you are using Fluid Engine if you don’t have an *UPGRADE button in the top left corner.)
1. Click in the left corner to +ADD BLOCK and choose </> Code.
The Code Block will default with the text Hello, World!
2. Move the code block where you would like the link to jump to.
For Squarespace 7.1 Classic + 7.0,
click the plus + icon in the location where you’d like to add the code block and choose </> Code. The rest of the steps are exactly the same in all versions.
3. Delete Hello, World! in the code block. Copy and paste the below code to the code block:
<div id="your-ID-here"></div>
Replace “your-ID-here” with a unique id for the link. Always include a dash in between words when using more than one word.
Note: Be sure to add a unique id each time you use an anchor link as not to cause any link confusion!
In this example for a navigation link, you are creating an “invisible” anchor link to take you to a specific section or location. If you are creating an anchor link to take you to specific text, the code would look like this:
<div id="your-ID-here"> This is the text. </div>
Replace “This is the text.” with the text that will display for the link.
Now to add the navigation link, as in the menu example or the text link.
To create a navigation link, from the Home menu, go to Website. Click the plus + icon to the right of the MAIN NAVIGATION on the Pages menu and scroll down the menu to choose Link.
(These are the links already created for the Venezia template navigation.)
For the link, use the following url structure:
/page#unique-id
Replace “page” with the url slug of the page where the code block is located. In the example of the one page navigation, the anchor is on the home page so the slug is home.
Replace “unique-id” with the unique-id that was used in the code block. The unique-id must be preceded by a # and added to the end of the slug with no spaces.
When creating the link to jump to an anchor link on a completely different page, you will use the page name of that page. For example: /about#unique-id to link to the about page.
For the Venezia template links:
/home is the page the link is on.
#services is the unique-id in the code block where the link jumps to.
You can add as many anchors on a page as you’d like, as was done with the Venezia menu. Just remember to use unique-id’s for each code block!
Tip:
So this fun anchor jumping link is how a Back to Top 🔝 link can work as well. Add this to a long scrolling page to quickly go back to the top of the page. Follow the same steps above to create the code block and link. In this case, you would use the text Back to Top in the code block.
Another way to use the anchor link is for food bloggers when they want to create a Jump to Recipe button or link. Following the same steps as above, create a code block and the text or button with the url link using a #unique-id as set in the code block. An easy link to create and really so helpful on long food blog posts when you just need to get back to the recipe!
To learn more about anchor links, see the Creating anchor links Squarespace article.
Or watch a quick video showing you exactly how to create the Perfect Anchor Links in Squarespace by Will Myers. He also includes how to add text to your anchor link and adjust when the scroll is slightly off.
