How to Create Anchor Links in Squarespace (With & Without Code)

Hey, I’m Galen from Local Creative Co. And in today’s video, we’re going to be talking about how to set up anchor links for Squarespace. An anchor link is basically just like any other link, except for, instead of taking you to a different page, it takes you to a section on a particular page. So, it jumps down to that section.

Anchor links are great for longer form pages. If you want people to be able to skip around to different sections based on what they’re interested in. It’s also great for sales pages. You have a really long sales page, and you want people to be able to jump down into your pricing and buy now section, you can add an anchor link throughout the page to direct people to that one section if they’re ready to buy and they don’t want to keep reading. The first thing you want to do when setting up anchor links on your Squarespace site is decide which section you want the link to go to.

This is a demo site here on Squarespace. And if I scroll down the page, I can see this, our services section here, and I’d like the our services link to jump people down to the section so they can learn more. Now you have to be on the Squarespace business plan or higher to use the technique I’m about to show you.

But at the end of this video, I’ll show you a quick way to do this without code, to make it really easy. First, I’m going to click to edit this page, scroll down to the section where I want to jump to, and I am going to add a code block here.

Once I’ve got my code block. I am going to put in the following code. You can copy and paste this from the blog post, where this video is. If you don’t want to write it out from scratch. But I’m going to put the word I’m going to open with the caret. I’m going to put the word div and then the word ID equals.

And then in quotes, I am going to put the name of the section. So, I’m going to call it services. And if you have a two-word name for the section, make sure you include a hyphen in between the words, but I’m just going to do a one word to keep it simple. So, I’m going to do div ID, services in quotations, I’m going to close that with a caret and then you can see it adds another closing div tag here.

This code is very simple. That’s literally it. And then I’m going to hit save, and you’ll notice that this particular code doesn’t actually show up on our site. It’s just stored behind the scenes. I’m going to hit save. So that saves to my site. And then at the top of this page, I am going to create a button or I’m a maybe going to change this link.

So, let’s actually get rid of this link here. Delete this. I’m going to add a button here. And in the link for this button, instead of putting in a URL, I am just going to put the hash sign, which is the sign for ID. And then I’m going to type in services, which was the ID I put in quotes in that code, I just showed you.
So, I’m going to click there. I’m going to hit save. Let that page save. And then when I click learn more, you can see it jumps down to the services section of this page. Super simple, really easy, and a very cool way to add some extra functionality to your website. Let’s take this a little bit further. Say I wanted to have a link from our homepage directly to maybe the college funding section on this services page.

I’m going to click edit here. And in this particular section, I’m going to again, add a code block. And I’m just going to drag this, so it sits on top of the section. I’m going to click into it and do the same code as before opening caret, div ID equals and let’s call this, um, funding and then close it. And you can see it just fills in the rest of the code for me there. I’m going to click out of this and I’m going to hit save. Again, that code is saved there, but you can’t actually see it on the site. Now, let’s go over to our homepage. And in this top section here, maybe I really want to send people to that college funding section on my homepage because that’s my, uh, most requested service. So, I’m going to say something like, oh, it’s actually changed this button here.

We’ll change this to, instead of saying, learn more, learn more about college funding. And then instead of doing, uh, funding, right. If I just added funding and then hit save, and then click on this. You can see that link isn’t going anywhere. That link is broken. It’s not working like it should. And the reason for that is because I told this link, this button to look for the funding section of the page that we’re currently on.

And that’s not the page of the funding section exists on it, exists on our services page. So, if I check what the URL is for the services page, it looks like it is our services. I can come back here, click on edit, click on this button. And I just have to tell it where to look for this funding section. So, I’m going to put in our services and we’re going to do a forward slash so our services and then hashtag or div funding.

So now if I hit save here and open up this page. I can see it’s going to take me to the, our services page. And then it’s going to jump down to the funding section, which is really cool. One more thing that I want to add, is a little bit of CSS that is going to smooth down the scroll and kind of give us that nice scrolling look.
So, let’s go back to our design settings here, click over to custom CSS. And I am going to add in just this little bit of code here, which I’ll include in the blog post with this video, that’s going to smooth down this scrolling behavior. So, I’m going to hit save. Let’s go back to edit this page. Let’s scroll back up to the top and this is the, our services page.

So, I’m going to add a new button and you can do this for links, buttons, navigation, anything. I’m going to set this to be hashtag funding because the link to the, or the funding section is actually on this page. It’s not on a different page. So, I’ve got the hashtag funding here. I am going to click save.

Now, this code won’t always work when I’m logged into Squarespace. But when I opened the site in a new tab and click this, learn more button, you’re going to see we get this nice, beautiful scrolling animation that takes us right to the section that we want to learn more about. As promised for those of you that don’t want to deal with any code or those of you who are on the personal Squarespace plan and you can’t add custom code to your site, here’s a quick workaround. You can use Google Chrome and install the Squarespace ID finder extension to your Chrome browser. You’re going to click this extension when you’re on your Squarespace site with the section that you want to link to, and you’re going to see all these little popups on your page. You can scroll down until you find the section that you want to link to click on the block ID.

You can see the little hashtag there and it says block, and then a bunch of letters and numbers afterwards. You can click on that ID, then scroll back up to your button. I’m going to turn off this extension for now and click on edit. Click on the button to edit the link. And then instead of having a custom, a div here, you’re just going to paste in the block ID that you already copied it from the extension.

Now, we’ll hit save. And you’re good to go. Now, this button will link to the section that you’ve chosen on that page. And you can use this again anywhere on your site, whether it’s buttons, links, or even in your main navigation. If you enjoyed this video, make sure to give it a thumbs up and subscribe, so you don’t miss any videos we come out with in the future.

And let me know in the comments, if this is something that you’re going to use on your website. Thanks so much for watching and I’ll see you next time.