Guide: How to create anchor links in Squarespace

Anchor links are a super useful website feature, but you might not realise what they are and how to use them.

Anchor links basically send users to a specific section of a page, rather than just the page itself. For example, if you’ve written a long blog post and steps 1 and 2 are for beginners, you could use an anchor text to send non-beginners straight to step 3. Handy right?

Watch the video

Check out the YouTube video below 👇

First things first, head to the page that you want to add your anchor link to. 

Above the section you want to link to e.g. step 3, you need to add a code block. Add the following code to your code block:

<div id="REPLACE-THIS-ID"></div>

Give your section an ID for the ID section of the code.

Now you want to head to the section of your page where you want the link to appear e.g. at the beginning of your blog post.

Add your content that you want to feature the link in e.g. “Skip to section 3” and add a link. Your link, instead of a URL, should be #REPLACE-THIS-ID [hashtag and then the self-assigned ID of the section you’re linking to. Make sure you use the same ID as what you added to your code section]. As a better example, if you wanted to link to somewhere on the page that you had added your code block with the ID ‘services’, you would add the following to a button or hyperlink:

#services

Pretty simple.

Hit save/publish and your anchor link will be added.


📩 Join the inner circle to get exclusive code updates


You can also add some CSS which makes the transition from the anchor link to the destination smoother and less sudden.

Head to Websites > Pages > Website Tools > Custom CSS and add in the following code:

html {

scroll-behavior: smooth !important;

}

Hit save and your anchor link transition will now be much smoother, creating a better overall user experience.

Have a go at adding an anchor link to your Squarespace web page and let me know how you get on!


Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.


Want more?

Sam Crawford

This article was written by Sam Crawford, one of the world’s leading Squarespace website designers.

Sam is an official Squarespace Expert, official Squarespace Partner, official Squarespace Community Leader, official Squarespace blog contributor, official Squarespace panelist, Squarespace educator and multi-award winning Squarespace designer.

https://bycrawford.com
Previous
Previous

Adding an FAQ accordion to a Squarespace website

Next
Next

How to create a testimonial slider in Squarespace