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-to links, anchor links are really handy in helping your customer navigate your website, which provides an overall better user experience.

You can use this effect 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

1. 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.

2. Link to a section on a different website page

   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.

3. 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.
   

✨Related post: How to use different font styles in one Squarespace heading using CSS

Using the code block to create anchor links in Squarespace 7.1

1. Add the code block

   Add a new code block on the part of the page where you’d like your link to jump to.
   

2. Add a unique ID to the code snippet

   Inside that code block, add this snippet:

   <div id="your-unique-ID-here"></div>

   Replace the your-unique-ID-here with a unique name that characterizes the content the link is going to.

   For example if the link will be jumping down to your service item called “Custom Photography”, then use those key words within your unique ID.

   <div id="custom-photography"></div>
   

   Important: If you’ll have multiple anchor links on one page, each one needs to have its own unique ID. Use lower-case letters and separate your words with hyphens. No spaces.
   

3. Create the link

   Now it’s time to create the link (using text, a button, or an image) and direct it to the code block you just created. Here are a couple options:
   

   link jumps to a section within the SAME page

   In the URL field where you would normally add the link, simply add a hashtag along with the unique ID you just created in the previous step.

   #custom-photography

   
   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.

   /yourpage#custom-photography
   

4. Save and test

   Don’t forget to hit “apply” and then 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.

   BONUS TIP!

   Smooth scrolling

   If you want to make the link “jump” less abruptly and create a smooth scrolling effect, follow this simple CSS tip:

   Open up your Custom CSS panel by navigating to DESIGN -> CUSTOM CSS, and add the code below.

   html { scroll-behavior: smooth; }

   That’s it! Good luck with your anchor links!

If you’re keen to learn more about CSS or really get into the basics of using CSS to customize your Squarespace website, check out some of my favorite resources below.

This post contains affiliate links (noted by an *). Any commission comes at no additional cost to you. Full disclaimer.

My favorite custom CSS resources

If you enjoyed this post, you’ll also like:

⚡️ How to use two font styles in one Squarespace heading

⚡️ 7 Useful Squarespace website plugins to check out

⚡️ How to remove the header and footer on a single Squarespace page