How to Link to a Section on a Squarespace Page: Anchor Links Made Easy

Have you ever wanted to direct visitors to a specific section of a page on your website without them having to scroll all the way down? That’s where anchor links come in. Anchor links allow you to link directly to a specific part of a page, making it easy for your audience to jump straight to the content they’re interested in.

In this tutorial, I’ll show you how to set up anchor links in Squarespace and give your visitors a smoother, more user-friendly experience. Whether you're linking to a section on the same page or across different pages, I’ve got you covered!

Watch the video

Check out the YouTube video below. 👇🏼

Why Use Anchor Links?

Anchor links are incredibly useful for long pages with multiple sections. Instead of having your visitors scroll endlessly, you can add a button or a link that takes them directly to a specific section. This feature is great for things like:

• Navigating to contact forms

• Jumping to product details

• Skipping down to FAQ sections

Let’s get started with a simple step-by-step guide.

Step-by-Step Guide to Adding an Anchor Link in Squarespace

Step 1: Setting Up a Button with an Anchor Link

• First, let’s set up a button with an anchor link to a specific section of your page. Go into edit mode on your site and click on the button you want to edit.

• Click the pencil icon to edit the button, then click "Add Link."

• For the link, you’ll use the section’s identifier by typing # followed by the section name. For example, if you’re linking to a contact section, you might name it #contact.

• Make sure the “Open in new tab” option is turned off, as anchor links should stay within the same page.

Step 2: Create the Anchor Point

• Now that your button is set up, scroll down to the section you want to link to (in this example, your contact section).

• Add a code block to the top of the section and enter the following HTML:

<div id="contact"></div>

This code creates an anchor point for your link, telling the browser where to scroll when the button is clicked.

Step 3: Test the Anchor Link

• Exit the editor and click on your newly created button. This will result in going directly to where the code block was placed on the page.

• This is not a great user experience so you can add some custom CSS to create a nice scrolling effect.

Adding Smooth Scrolling with Custom CSS

If you want to give your site that polished feel, adding smooth scrolling is a great touch. Here’s how you can do that:

Step 1: Open the Custom CSS Editor

• In the Squarespace menu on the left side of your screen you will Navigate to WEBSITE > PAGES > WEBSITE TOOLS > CUSTOM CSS

Step 2: Add the Smooth Scrolling CSS

• Scroll to the bottom of any CSS that you already have on your site and paste the following CSS code into the editor:

/* Proper Anchor Scrolling */

html {

scroll-behavior: smooth!important;

}

This will ensure that when visitors click on an anchor link, the page will scroll smoothly to the desired section.

Step 3: Save and Test

• After adding the CSS, save your changes and test the anchor link again. You should now see a smooth scrolling effect when the button is clicked!

Using Anchor Links in Text or Navigation

Anchor links aren’t just for buttons—you can use them in text or even in your site’s navigation. Here’s how:

• In Text Blocks: Simply highlight the text you want to link, click the link icon, and enter #contact (or whatever section name you’ve chosen). The same HTML code used earlier will apply.

• In Navigation Menus: You can also create an anchor link in your main navigation. Just add a new link, name it, and set the link to #contact.

Wrapping Up

And that’s all there is to it! Anchor links are an easy way to improve the user experience on your Squarespace site, letting visitors navigate straight to the sections that matter most. Whether you’re adding a button, text link, or navigation item, these links keep your site clean and efficient.

📨 Join my mailing list to get Squarespace tips & tricks right in your inbox

Your designer

I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.