How to Add Anchor Links in Squarespace
Linking to pages within your Squarespace website is easy, but have you ever used an anchor link?
Anchor links are a great way to improve the user experience by allowing them to jump to a specific section of the same page, or another page within your website. You can use this method in your own website in just a couple simple steps.
Step 1. Add Your Anchor to the Desired Section
Start by going to the page and section that you want to anchor your link to and add a code block right above where you want the page to jump to. Where you place the code block is important since this is where the link will take you to. Make sure it is directly above where you want the page to jump.
Start by picking a name for your anchor. Choose one that will be easy for you to remember that is relevant to the content you’re anchoring to. I use anchor links in the Bobbie Template, so I’ll use it as an example. I am creating a link on the home page which will anchor to the Weddings section on the Services page so I will name this ‘Weddings’.
Once you’ve decided on the name, paste the following code into the code block:
<div id=”anchor”></div>
Replace “anchor” with the name for your anchor.
Setting up your anchor.
Step 2. Link to Your Anchor
Go to the place you want to link your anchor to and setup your link.
If your anchor is on a different page you’ll specify the URL slug and add your anchor name. It would look like /page#anchor
For this example it would be /services#weddingsIf your anchor is on the same page as the link, you can simply specify the anchor name instead of using the method above. Just paste #anchor with your anchor name.
Create the link for your anchor.
Sweet Tip
You can also use this same method anywhere you would use a link, like buttons or hyperlinks within your text.
That’s it! See the Anchor Link in Action
If you liked this post, Pin it!
