How to create anchor links in Squarespace without code

Website Design

Feb 25

Do you have a long, scrolling website page but want your visitor to be able to jump down quickly to different sections on the same page?

Sometimes also referred to as jump links, anchor links are super handy in helping your customer navigate your website, which provides an overall better user experience.

You can create and anchor link on a text link, a button, or even an image. Almost anywhere you can create a link.

Below are a few different scenarios in which you may want to use anchor links on your Squarespace website.

Scenarios where anchor links could be useful on your website

Link to a section on your website page
You have a long website page that details all the services and offerings your business provides. The content is well organized into sections, but you’d like your viewers to be able to quickly find and jump down to what they’re interested in. You’ve placed icons at the top of the page representing your different services, and you want to link those icons directly to their corresponding information sections on the same page, without the viewer having to scroll down.
Link to a section on a different page of your website
Your Home page references three services that you provide. But instead of just linking to the Services page, which is a long scrolling page outlining your three services, you’d like to link each service item on the Home page directly to its description on the Services page, so that the visitor doesn’t have to scroll down to find it.
Link to a page section from the main navigation
Similar to the above scenario, you’ve created a drop-down main navigation menu with your three services listed, all leading to your one Services page. However you’d like those individual menu links to take the visitor directly to its corresponding service item on that page, instead of having the viewer scroll down to find it.

Steps to add an anchor link on a Squarespace web page without code

1. Identify the page section

Find the section where you want to the link to jump down (or up) to and click on EDIT SECTION. Under the FORMAT tab, you’ll find a field called ANCHOR LINK.

2. Create a unique anchor link name

Add a unique name in front of the hashtag (#) that identifies the section. For example in the image above, you might call it #case-studies or #portfolio.

💡 PRO TIP: If you’re going to have multiple anchor links on one page, each one needs to have its own unique ID. Use lowercase letters and separate your words with hyphens. No spaces.

3. Copy the anchor link name

After you’ve created the unique name in the Anchor Link field, copy it by clicking on the copy icon directly to the right.

4. Create the link

Now it’s time to create the link (using text, a button, or an image) and assign it to the page section that you just named.

Here are a couple options:

The link jumps to a section within the SAME page

In the URL field where you would normally add the link, simply paste the unique ID you just copied from the previous step.

#unique-name

The link jumpS to a section on a DIFFERENT page

In the URL field, directly after the page URL, add a hashtag along with the unique ID you created in the previous step.

This allows you to create a link on one page (text, button, image, etc.) and tell it to “jump” to a particular section on a different page.

/yourpage#unique-name

5. Save and test

Don’t forget to save your page. Do a test of the link you created and be sure it “jumps” to the correct page and anchor point on the page.

💡 PRO TIP: Make the link “jump” less abruptly and create a smooth scrolling effect. Open your Custom CSS panel by navigating to WEBSITE > PAGES > WEBSITE TOOLS > CUSTOM CSS, and add this code:

html { scroll-behavior: smooth; }