How to create Anchor Links (One-Page Sites)
We’ve all seen the official Squarespace guide on adding anchor links and to many, it can be an overwhelming read. We’ve created a short simple guide for those wanting to add links to their navigation (header) for a simple one-page site. Psst… Guess what? These steps can be used for text, buttons and image clickthroughs.
Your first step is adding the link. You can add a link to your navigation, a button or text (ex. 1). The link should include your full website URL with the page slug, it can be the Squarespace URL or the domain name.
Ex. 1
Ex. 2
Add a link
Enter your the page URL for the page your anchor will be on. I.e if you want visitors to click a contact link in your header and jump to a form on your homepage, enter https://mysite.com/home
At the end of the page URL add a the unique ID. This can be anything you want visitors to see in the address bar such as /#contact.
Save or Exit the link editor. Your full link should look like this: https://mysite.com/home/#contact (ex. 2).
On your anchor page click Edit and scroll to the section you want the link to jump to. Again, if you have a contact form at the bottom of your homepage you’ll scroll down to the section with that form. Click Add Block and select the option for a code block. Double-click the code block (or click the pencil icon) and delete the text. Add the following text.
<p id="unique-id"></p>
Replace the unique-id with the same one you used in the link (i.e if your link used #contacts then your UID should be “contacts”). Make sure the caps are exactly the same, all lower case, anchor links and page slugs are case-sensitive.
Here’s what that should look like:
<p id="contacts"></p
See example 3
Ex. 3
Click Save and you are all set! You can repeat the same steps for any anchor links you need to add on your site. Keep in mind that anchor links do not properly jump (or anchor) when in editor mode. You can view the live site instead. If the site is private, add a password by going to Settings > Site Availability > Password. You can then enter your URL in a private window to test the anchor function.
Full Video
Got additional questions? Drop it in the comments below or contact us!
