How To Create Anchor Links in Squarespace

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content


About this tutorial

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This week I am mixing things up and sharing an HTML code tutorial instead of a CSS one!

I wanted to show you how to easily create an anchor link on your Squarespace website using some simple HTML.

Anchor links work by naming a section of a page, and when clicked, pulls that "anchor" to the top of the browser window.

Anchor links are essential for one-page websites with a lot of sections and work great for contact forms too.

They can work essentially anywhere you would put a link; in your main navigation or within your on-page content.

Check out the tutorial video to see the anchor link setup step-by-step, and use the codes below to create your own.

Remember, any word or combination of letters and numbers will do, but keep it between the quotation marks, and no spaces allowed. 😉


Video tutorial


Code Example

Here are the Squarespace anchor link codes from the video along with the steps you'll need to take to make them work on your own site.

Step One: Create Your Anchor

Add a code block to the spot of your site that you want to be at the top of the browser when someone clicks on your anchor link.

<div id=”anchor”></div>

Step Two: Link To Your Anchor

You can use the entire page URL, or just the anchor itself if your button is on the same page the anchor is on.

When you link to your anchor from the same page, you can just use the anchor name like this: #anchor

When you want to link to that spot on that page from a different page on your site OR from your site menu, you need to include your whole URL like this: yoursite.com/page#anchor

insidethesquare

Squarespace Circle Leader & Creator of InsideTheSquare.co

https://insidethesquare.co
Previous
Previous

How to give buttons a frosted glass effect in Squarespace

Next
Next

How to create custom background text for page sections in Squarespace 7.1