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

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

Using the code block to create anchor links in Squarespace 7.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.
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.
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
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

SquareStylist* is by far one of my favorite resources for custom CSS and training. The idea here isn’t about just copying and pasting some code, but really learning and applying that knowledge to your websites. Rache’s mini-courses are in-depth and very easy to follow with both text and video support, and they’re packed with amazing CSS tips. The knowledge you’ll walk away with is well worth the price tag. But there are also some incredible and FREE mini-courses she offers on her SquareStylist shop - definitely worth checking out.

Ghost Plugins* is an excellent resource for custom CSS. There’s a huge searchable library of free and premium plugins and copy/paste snippets for your Squarespace website. Instructions are clear and easy to follow, so this is a great place to start if you’re new to CSS and want to take things a little slow. And now you can grab 10% off any of their Super Plugins or Squarespace Templates with promo code PORTABLUDESIGN.

If you haven’t done so already, I highly recommend signing up for Becca Harpain’s weekly free CSS tutorial email. As the founder of Inside the Square, she’s a self-professed Code Queen… and it’s true! Her Squarespace CSS mini tutorials and free code snippets are one of the best places to start as a CSS newbie. And if you learn best visually, her accompanying YouTube Videos are extremely well done and so easy to follow, as Becca walks you through step-by-step in her demo site.

Another one of my favorite custom CSS resources for Squarespace websites is Beatriz Caraballo. Browse her blog for free tips and CSS tutorials. There’s a wide variety, all varying in complexity and clearly marked in terms of Squarespace version and template compatibility. Her shop also offers some more advanced CSS plugins and training that will get your website revved up.