How to Create Anchor Links in Squarespace

What Is an Anchor Link?

If you’ve never heard of anchor links in website design, I’m about to change your world. No, I’m not talking about ship anchors. Anchor links are links that allow you to go to a very specific area or section of a page on a website.

Anchor links can be used within the same page, for example, you’ve probably seen a “back to top” button when you’ve gotten to a long scrolling page. Or they can be used to send you to a certain section on a different page. This could be useful if you have a contact button on the home page but your contact form is at the bottom of your services page. Instead of sending people to the top of the services page and forcing them to scroll all the way down to the bottom, you can send them to the bottom of the services page automatically using an anchor link.

When Should You Use an Anchor Link?

The examples I gave above are just a few of the ways you can use an anchor link on your website. There are no limits to how many anchor links you can have on your site so feel free to use as many as you like! They’re perfect if you have one long scrolling landing page for your site and want to send people to specific sections. Or if you have a gallery section at the bottom of your about or services page and want to give people an option to view the gallery page immediately that would be a perfect place for your anchor link as well.

Anything that’s linkable can be an anchor link so this can be a button or even an image. Calls to action are so important on a website (you can read more about calls to action here) so it’s great to use buttons as anchor links.

You can even use anchor links in your headers. Back to my previous example, if you want a contact button in your header, but your contact form is at the bottom of your services page, use an anchor link to link directly to your contact form at the bottom of the services page.

How Do I Add an Anchor Link to My Site?

So just a warning, you will need to use a tiny bit of code. Don’t get overwhelmed, it’s very simple and you just need to copy and paste so please don’t be intimidated.

Step 1: So we’re going to work backwards and first start with the destination we want people to land on once they’ve clicked the anchor link. To start, click the plus sign and add a code block to the area of your site that you want the anchor link to take people to. This could be directly above your contact form, directly above a gallery, etc.

Once you’ve added the code block, remove what’s in there and paste this in:

<div id=”your-anchor-link-name”></div>

You can make “your-anchor-link-name” whatever you want it to be. Just remember, if you’re using multiple words, put a dash in between them.

Below are two examples, the first with two words and the second with one word.

<div id=”contact-form”></div>

<div id=”packages”></div>

Once you’ve pasted in your code and changed the name of your anchor link, hit save.

Step 2: Now we need to link to the anchor code block we just created. Find your starting point, whether that’s a button, a navigation link, an image, etc. and click on the link icon to add a link. Select “page” from the left side and choose the page the anchor link is on and in front of that link, you’re going to add a slash and then your anchor link using the hashtag or pound symbol in front of it. So you’re telling your website to take people first to that page and then to that specific area of the page where we put the code block.

See two examples below:

If we want to link to the contact form on our services page, the link would look like this:

/services/#contact-form

If we want to link to the packages section on our about page, the link would look like this:

/about/#packages

And there you have it! You’re now a total pro and linking to any area of your site that you want!