How to Create Anchor Links in Squarespace (7.0 and 7.1)

Sometimes you don’t want to scroll through a long page to find the section you want to read. So, it’s great when you get a link that takes you right there.

This link is called an anchor link or a page jump link. It takes the reader right to a specific spot on your page.

---

When Should You Use Anchor Links?

Anchor links can be used anywhere on your website. Here are a few examples where they might be helpful to you.

Single Page Websites: I would recommend using anchor links in your navigation on single page websites. These pages can be incredibly long, but they usually have separate sections of information (kind of like different pages). Anchor links will help your visitors find your information quickly and easily.

FAQs: Do you have a ton of questions in your FAQs? You may want to separate them into sections (ex: shipping info) then add an anchor link to each section.

Sales Pages: These are often long pages with a lot of information, but readers may not want or need all the info to make a decision. Or, they may be visiting a second (or third) time after reading everything and are ready to make a purchase. Anchor links will let them quickly move to the purchase area of the page.

Blog Pages: We’re all writing much longer blogs these days, so a table of contents can be a nice addition to your blog post. It’s also great for SEO.

I’ve also used anchor links to create bibliographies and media pages. It basically works for any page that you want separated into easy to navigate sections.

---

How to Create Anchor Links in Squarespace 7.1 Index Pages

Updated February 2025

Until recently, if you wanted to create anchor links in Squarespace 7.1 using code. But now it’s much easier two-step process.

Create Your Anchor Point

1. On the page you want your anchor point click EDIT

2. Hover over the desired page section & click EDIT SECTION

3. Under Anchor Link add your anchor name (no spaces, only hyphens)

4. Click the copy link icon & click SAVE at the top left corner of your page

Create Your Anchor Link

1. In the link editor paste your link

2. Click Enter, then click SAVE at the top left corner of your page

Anchor links in Squarespace 7.1 are available in:

• Fluid Engine Sections

• Auto Layout Sections

• Gallery Sections

• Courses Sections

• Video Sections

---

How to Create Anchor Links in Squarespace 7.0 Index Pages

One thing I love about index pages in Squarespace 7.0 is how easy it makes it to create anchor links. You don’t need to add any extra code to make it work!

Find the Section URL

First we need the find the spot on the page that we want to jump TO

Index pages are already broken up into sections. So we just need the URL or section name in order to link to that section.

1. From the Home Menu click on Website > Pages

2. Hover over your Index Page and click the arrow < to see your Sections

3. Hover over the Section you want to link to and click the Cog icon

4. In the General section of the pop-up, scroll to the URL SLUG

5. Copy the URL SLUG (it will look like /url-slug)

Add a Link to the Same Page

Now we need to add a link on the page to jump FROM to our anchor point (index section). You can add a text, image or button link anywhere on your page.

1. In the link address area paste the URL SLUG

2. Replace the / with # (you may not have a front slash – if you don’t just add # in front of the slug (#url-slug)

3. Apply to save the link

*If you are using the Pacific template, Squarespace recommends adding –section after the slug (#url-slug-section).

Add the Link on a Different Page or in the Navigation

To add an anchor link in your navigation or from a different page we first need to indicate the page that the anchor is located.

1. In the link address area, select page and choose the page where your anchor is located

2. Paste your URL SLUG after the page name

3. Add /# between your page name and URL SLUG (/contact/#url-slug)

---

How to Create Anchor Links in Squarespace 7.0 Pages

So what do you do when there’s no natural anchor point on the page like there are with index page sections? Create your own using code!

Create Your Anchor Point

1. Add a Code Block wherever you want to send your visitors to on your page (I often pick the top of a section)

2. Paste the following inside the code block: <div id="anchor-id"></div>

3. Change anchor-id to whatever you want to call your anchor

4. Click Apply

*Use hyphens to separate words in your anchor ID (name). No spaces.

*It’s important to use different anchor IDs for each anchor point so your link will know where to go.

Create Your Anchor Link

Creating the actual link using the anchor point we created is very similar to using the index URL slug. In this case we simply use the anchor ID located between the quotation marks (“ ”) in our code block. Then add a hashtag (#) before the ID.

So, to add a link on the same page we would add the following into the link address area:

#anchor-id

To add a link to an anchor on a different page we would add the page name in front of the anchor ID.

/page-name/#anchor-id

My Anchor Link Isn’t Ending Up in the Right Place on my Page!

You probably have fixed or sticky navigation at the top of your website. So, your link is going to the right place, but your navigation is now covering the top of your page and your anchor point.

Luckily Will Meyers came up with a great solution for this issue.

We just need to add a slightly different code to the code block when creating our anchor point in Squarespace 7.0.

<div id="anchor-id" style="position:relative;top:-150px"> </div>

Then just change the id and link to the anchor as you did in the examples above.

If you are using the new 7.1 anchor points you can add this code to the Custom CSS area:

#sectionid { scroll-padding-top: 150px;}

---

Add Smooth Scrolling

You can make the scroll down your page to your anchor point look a little more gentle and smooth with just a single line of code pasted to the Custom CSS area.

1. From the Home Menu click on Website (you’ll also need to click Pages in 7.0)

2. Scroll down past the pages of your website to the Utilities and click Website Tools

3. Click Custom CSS

4. Paste the following code into the window & click Save

html {scroll-behavior: smooth;}

Now you have all the steps to create smooth anchor links anywhere on your Squarespace website!

Want more tips?

Get all the latest news, updates, tutorials, discounts and tips about Squarespace, Web Design, SEO and more.

Sent out once a month, so I don’t clog up your email!

Sign up