How to create anchor links in Squarespace (7.1 and 7.0)
You know when you click a link on a page, and it swiftly scrolls you through to another section on the same page? Well, that’s what I’m going to show to how to do today!
These are also sometimes called jump-to links, anchor links, or on-page links.
There are a few ways we can create these in Squarespace , and the technique depends on which version of Squarespace you are using. If you're not sure which version you're using (Squarespace 7.0 or 7.1) check out these instructions.
Either way, all of the these techniques are pretty simple, so let's dive in!
How to create anchor links in Squarespace 7.0 Index Pages
There are two different ways we can create anchor-links in Squarespace 7.0, but this first one is for INDEX pages only. If you are using a regular Blank Page, scroll down to the last set of instructions about using basic code.
Index pages are a great place to use anchor links, because they’re usually long scrolling pages broken up into different sections.
Sometime’s these pages can get so long, that adding anchor links to the page is almost necessary. So when you click on one of these links, it will scroll you to a particular section of that page.
With Index page it’s really easy, and you don’t have to add any code.
Let’s get started:
Firstly you will need to find the URL of the particular section you want to the link to land on. To do this, head over to your Pages panel in the sidebar and locate the section you want the link to land on. Let’s say I want my link to land on the Home3 section. Hover over your chosen section and click on the little cog that shows up.
When the page settings dialog pops up, scroll to the bottom and locate your URL SLUG. This will be our link, so go ahead and copy this slug (/home3).
Now head back to your Home page, and we’re going add our anchor link to Home1. (You can add this link anywhere on your page, but for this example, I want a link in Home1 to jump to Home3)
You can either add a button, image, or just a regular text link. Anything you can add a link to, you can add an anchor link to!
Paste in the URL SLUG we copied earlier, but replace the slash symbol (/) with the hash symbol (#) so the final link would be #home3
Select Apply and that’s it! This link will now jump to the Home3 section of your Index page when you click on it.
Note: If the link isn’t working, it might be because you’re in preview mode. Try visiting your live site out of the editor or in incognito browser mode and try it there.
If it’s still not working, it might be because you’re using the Pacific template. If you are, add “-section” to the end of your link, eg #home3-section and test it again.
How to create anchor links in Squarespace 7.1 Classic Editor
There are two different ways we can create anchor-links in Squarespace 7.1, but this first is using the page sections as links. This technique is of similar difficulty to the technique below using simple coding, so take your pick - both options work well!
Please note that this technique won’t work if you are using Squarespace 7.1 Fluid Engine. This will only work in 7.1 Classic editor. Not sure what the difference is? Check out this post. Use the 3rd technique (at the bottom of this page) if you are using Fluid Engine!
In Squarespace 7.1 the pages are broken up into different sections, this makes it really easy to design and also is handy when we want to use a anchor link to link to a specific page section.
Let’s get started!
Each page-section has a unique ID. We need to find this ID so we can then link to it. This ID isn’t easy to find without the right tools, so I highly recommend you download this Squarespace ID-Finder Chrome Plugin.
Download the plugin and add it to your Chrome Browser. Open up your page and click on the browser Plugin Icon. When you click on the icon, a ton of different IDs will show up, something like this:
Notice there’s a section ID on every page section. Look for the page section you want to link to, and click on the ID which will automatically copy it.
Now you will have something like “section[data-section-id="5f0e82f44b2cad2a6b5ae345"]” copied.
Once that’s copied, you can either add a button, image, or just a regular text link. Anything you can add a link to, you can add an anchor link to! This will be the link that goes to your page section.
Paste in the Section ID that we copied, BUT you need to make some changes to it:
Remove everything but the number
add #page-section- in front of the number
the final link will look like this #page-section-5f0e82f44b2cad2a6b5ae345
Select Apply and that’s it! This link will now jump to that specific section of your page when you click on it.
Note: If you find the scrolling a bit too harsh, quick or clunky, you can add this code to your custom CSS which should smooth it out:
html {scroll-behavior: smooth!important;}Adding an anchor link on a page in Squarespace 7.0 & 7.1 using some basic code.
This technique works in Squarespace 7.0, 7.1 Fluid Engine and 7.1 Classic Editor.
Now I’ll show you how to add an anchor link to any old page, using 7.0 or 7.1.. This involves a little bit of code, but it’s basically copy and paste, so it’s easy!
Firstly, you will need to add a code block where you want your link to land.
Inside the code block, paste the following code:
<div id="your-ID-here"></div>You can change the text inside the speech marks (your-id-here) to anything you like. Try to keep the ID relevant to the link, this will help keep things nicely organized. You can’t use spaces in this unique ID, use a dash instead. Eg:
<div id="sign-up-form-link"></div> <div id="contact-us-here"></div>Also, if you’re using code somewhere else on your page, or in your CSS editor, make sure this unique ID is different than anything else you already have on your website, to avoid coding conflicts.
Your code block should look something like this:
Click apply
Then, your link will look something like this (an “empty” code block"):
Note: If you are familiar with code, you can add text inside the div tags if the blank code block is taking up too much space.
Now, just like we did in the last examples, we’re going to add a link and add our unique ID. Remember to add a hash instead of a slash!
And that’s it! Simple, right? When anyone click on that link they will be taken to where your code block is.
Add a “back to top” link in Squarespace
Sometimes when your page is so long, it’s useful to add a “back to top” link at the bottom of different sections, or at least the bottom of the page.
You can add a Back to Top anchor link using the exact same methods as we used above!
Just add your link at the bottom of the page, and either link to your top index or page section, or add a code block at the very top of the page and enter in your unique ID!
Simple, right? Click the button below to see how it works (this is the Page/Code method)
Make sure to check out some of our other quick code tricks for customizing your Squarespace site below! 👇
How to customize your Squarespace cookie banner design
How to animate your links on hover in Squarespace 7.0 & 7.1
How to create a sticky header nav in Squarespace
How to add a background color to a text block in Squarespace
6 fun code snippets for your Squarespace web design
Liked this post? Pin it to Pinterest!
