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