One really cool effect we can use in Squarespace is an anchor or jump-to link. This is when you click on a button, link or image on a website and instead of taking you to a different page it simply scrolls you up or down to another section. This is a fantastic way to maximise a 1 page extended style website in which your visitors can click on a link to jump to another part of the page.

In this article I’m going to show you 3 different ways to create anchor links in Squarespace 7.1 - so let’s get stuck in!

First things first. To make your scroll smooth you’ll want to add this CSS snippet to the CSS panel in your website edit mode.

///SMOOTH SCROLL///

html {
scroll-behavior: smooth;
}

This will make sure that your jump to experience is smooth and not abrupt or jerky.

Anchor link technique one - add a code block anchor

This is my recommended technique for adding anchor or jump-to links.

Why?

Well firstly we can be precise about where your anchor link jumps to - for example the middle of a section rather than the top of a section which is where a section link jumps to.

Secondly - it’s a great opportunity for us to use our keywords to maximise our SEO opportunities.

Thirdly - it doesn’t require any block identification (this is easy to do, but still it’s nice to keep things simple!)

Step 1 - Add a code block for where you’d like your link to jump to

In this code block you will add the following snippet:

<div id="ID-goes-here"></div>

You will need to choose a unique ID for each anchor link so they don’t get confused and go to the wrong place! Here is where you can be smart and use your SEO keywords.

Be mindful to ensure that if you’re using multiple jump-to anchor links on your website that you use a unique ID for each one so they don’t get mixed up. This ID should be relevant to the content it’s linking to.

For example for a Squarespace website designer linking to an about section or a florist linking to their services these might be appropriate IDs.

<div id="about-squarespace-webdesigner"></div>

<div id="floristry-services"></div>

Pro tip: It’s best practice to use lowercase text, and to separate words with dashes or hyphens “-”. Note that spaces cannot be used within your IDs.

Step 2 - Connect the link

You can add a link to whatever you might normally add a link to on your website, for example text, buttons, images etc.

Want your text links to stand out? Read this on 3 awesome ways to style your hyperlinks on Squarespace

To do this you will simply add a hashtag followed by your ID into the place where you’d normally add the url for example

#ID-goes-here

#squarespace-webdesigner

#floristry-services

Always remember to press apply & save.

As i mentioned earlier, this technique is my preferred method however, it’s not always possible, for example if you want to link to a gallery section which you can’t easily add a code block to. In that scenario we can use the second or third technique.

Anchor link technique two - link to a section ID

If we can’t create a code block to link to, we can instead target a section by using its section ID.

Step 1 - Find the section ID

There are a number of ways to do this, but my favourite is to use a Squarespace block identifier - the one I use is this chrome extension by Heather Tovey.

Once you’ve installed it (you will need to be using google chrome) you simply need to click in the top right hand corner of your chrome browser whilst you’re on the Squarespace website page you want to find a section or block ID for and it will automatically pop up all of the IDs for that page (magic huh!!)

Find the ID for your section - you’ll see it begins with “section” and is in blue (as opposed to the red ones which are the block IDs) and click on it to automatically copy it to your clipboard.

Step 2 - Edit the section ID

We will need to slightly edit the section ID to use it for an anchor link.

After we’ve copied the data section ID it will look like this:

section[data-section-id="608724f258dab2138f5f9396"]

We need to remove all the part before and after the number so it looks like this:

608724f258dab2138f5f9396

Finally, we need to add #page-section- in front of it so it looks like this:

#page-section-608724f258dab2138f5f9396

Step 3 - Add the link

Now we can add this as a link to whatever we like - text, image or button. You will simply select the add a link option and paste your equivalent of #page-section-608724f258dab2138f5f9396 into the space for the url.

Select apply and save.

Anchor Link technique three - link to a block ID

If we can’t create a code block to link to we can instead target an existing block by using its block ID. This process is very similar to the section ID but it allows us to target a more specific part of a section, and as we don’t need to edit the block ID once we find it via the ID finder it’s slightly easier than the section ID method.

Step 1- Find the block ID.

Using this Squarespace chrome extension by Heather Tovey, find the ID for your block - you’ll see it begins with “#block” and is in red (as opposed to the blue ones which are the section IDs) . Click on it to automatically copy it to your clipboard.

It will look something like this #block-f9d326ff8d0da1511608

Step 2 - Add the link

Now we can add this as a link to whatever we like - text, image or button.

To do this you need to add it to the “Pages” section, so for text links you will need to click on the gear icon first and then navigate to “Pages”.

Then paste your equivalent of #block-f9d326ff8d0da1511608 into the box. It will likely show a dropdown multiple options which refer to various pages that have the same block ID so make sure you select the one for the correct page.

Click apply and save.

Et voila voila!

Three different techniques to add a jump-to or anchor link to your Squarespace 7.1 website!

A fantastic way to add a little extra shine and to help your visitors navigate through to the content of your site to get to your site goals (which is what it’s all about after all!

Liked this? You’re going to love

3 easy ways to create anchor links in Squarespace 7.1