Using Anchor Links for Better User Experience

An anchor link is a type of link that takes you to a specific section within the same page. Think of a table of contents in a long blog post that lets you jump to a subheading instantly. It’s essentially a “page jump” that enhances navigation and user experience.

Adding anchor links can be particularly helpful on long-scroll pages, such as Home, Services, or Sales pages, making it easier for visitors to find the information they need without endless scrolling. In a way, it can indirectly benefit SEO of a given website. When users can easily find / get to information they came for, they spend more time on the page and the bounce rate (users leaving after seeing only one page) is reduced.

Anchor links have always been tricky to implement on a Squarespace website, as they’re not an obvious feature and often require following a tutorial. The good thing is that in 2024 Squarespace simplified the process. Adding anchor links no longer requires using code blocks, making it much more accessible for people without coding skills.

How to use anchor links in Squarespace

We’ll guide you step-by-step on how to add anchor links to your Squarespace website. For this tutorial, we’ll use a sales page from our Social Motion Squarespace Template as an example. Specifically, we’ll show you how to click a button in the second section of the page and scroll directly to the Pricing Plans section, located near the bottom of the page.

Squarespace anchor links using built-in functionality

As of the time this post was written, Squarespace actually offered a native solution to this problem. The biggest obstacle is, you have to be a Squarespace Circle member in order to use this feature (which we at Applet Studio are) - again, at least this was the case at the time of writing.

Now, if you are a Circle Member, you can use any section of your website as target - just name the section to jump to. You can choose any name, but it’s better to be short and concise. The section name will become its unique ID, so it can be used only once per page. Avoid spaces; instead, separate words with dashes, similar to how links are formatted on the web.

Click Edit to make changes to the page, scroll down to your section, click Edit Section, and scroll down the Design tab to find the Anchor link text field. Type in the name of the section here, for example, we named it “pricing-options”. Click the copy icon next to the text field.

Squarespace anchor links using a code block

If you don’t have the section ID feature and aren’t a member of Squarespace Circle, don’t worry - you can still use anchor links across your website! To achieve this we will need to use code blocks - a feature available on all Squarespace Plans (at least when it comes to anchor links).

Previously, to give the section its ID we had to use a code block. But with Squarespace’s recent update, we received anchor link innate functionality.

Select a section you want to target.
Add a code block inside it and use a ode like this: <span id="YOUR-ID-HERE"></span>

That’s it! A section can have more that one code block and thus more than one ID (although that is somewhat redundant for our purposes), you can have many sections each with it’s own unique ID or multiple IDs. Only rule - these IDs must be unique. Also, avoid spaces or special characters, or your targeting might not work as expected.

Create the anchor link to use on your Squarespace website

If you used the built-in functionality, you can take advantage of the “copy” option provided by Squarespace, as it it generates the full version of the link for us, which is: https://socialmotionbyapplet.squarespace.com/course#pricing-options.

If you take a closer look at it you will see that it consists of three parts:

your website URL https://socialmotionbyapplet.squarespace.com

page slug with a slash /courses

section ID with a hashtag #pricing-options

When we use page jump on the same page we only need the last two parts – page slug and Section ID. But you can also use the long link if you want to.

Similarly, if you are using code blocks, all you need to do is construct this URL manually - simply put the page URL followed by the # sign and the name of your ID.

Scroll back up to the button in the second section of the page, enter the Edit mode and select the button, click the pencil icon, then attach link, and finally type in the page slug and the Section ID (or paste the link). Click Save at the top left of the page and check your link!

You can also add the anchor links to text and images using the same logic.

Anchor links are now enabled your Squarespace website

Now you know how to easily add anchor links to your Squarespace website, making navigation smoother for your visitors and enhancing the overall user experience! Whether it’s buttons, text, or images, linking to specific sections on the same page is now a straightforward process thanks to Squarespace's 2024 update. Say goodbye to complicated code blocks and hello to better site usability – your visitors and your SEO will thank you!