How to Create Page-Jumping Links in Squarespace
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 call jump-to links, or anchor links.
There’s a couple ways we can create these in Squarespace, and both options are super easy. So let’s get started!
The two different ways we can create anchor-links in Squarespace comes down if you’re using a regular Page, or an Index Page:
Adding Anchor Links On An Index Page:
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.
Firstly you will need to find the URL or 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 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!
Instead of the slash (/) you’ll want to add a hash (#) so the final link would be #home3
Select Add Link 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.
Adding an Anchor Link on a Regular Page
Now I’ll show you how to add an anchor link to a regular page. This involves a little bit of code, but it’s basically copy and paste, so it’s easy!
It’s not as common to use anchor links on non-index pages because they’re usually not as long. But if you have a long regular page, by all means, use anchor links!
Firstly, you will need to add a code block where you want your link to land.
Inside the code block, paste the following code:
You can change the text inside the speech marks 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:
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 with in Index Page, we’re going to add a link and add our unique ID. Remember to add a hash instead of a slash!
Add a “back to top” link
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 section (in my example this would have been Home1) 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)