Squarespace hack: How to add jump to anchor links on a page

Squarespace hack How to add jump to anchor links on a page.png
 

So you’ve got a longgg page, and you’re looking for a way to help your visitors quickly skip to the content they most want to see?

Jump-to links, sometimes also called ‘anchor links’ are what you need then!

Now, because they’re called anchor links, I’m of course going to get all nautical on you, and drop as many sea-worthy puns in here as possible!

Creating this does take some coding, but fear not young sailor, your Captain is here, and I’ll guide you through these stormy waters and knoty winds. I won’t let a man go overboard, and I’ll be sure to steer us clear of any icebergs!

Honestly, this is about the simplest code you could hope to implement on your website, so really truly, don’t have a heart attack because I said the word ‘code’.

 

Here’s how it works.

First, we need to drop our anchor. (That’s not a pun, I’m serious there.) The anchor, as anchors do, holds something in place. 

For example, say on a page I’m talking about selling ticket to an upcoming sailing regatta, and the place to purchase the tickets is at the bottom of the page. I would then drop an ‘anchor’ where the ticket sales bit is at the bottom of the page, and higher up in the page where I’m speaking about the ticket sales, I’d link to the anchor. Then, when a site visitor clicks the anchor link, they’d then be swooshed on down the page to your ticket sales area, where your anchor is sitting.

You can also do this the opposite way to with a ‘Back to Top’ button. You would then drop your anchor at the top of the page, and link to it from the bottom of the page.

We can make both images and/or text into the clickable link bit, so you can get a bit creative there with what your link looks like.

 

Now, before you go creating a bunch of ‘back to the top’ links on every page on your site, let me just say, there’s really really a better option in terms of conversion. Con-what? Conversion is the act of getting people to convert on your site from visitor to email subscriber, buyer, social media follower, etc. 

The very best thing to have at the bottom of your page is a Call To Action! I give a complete overview of Calls To Action in this post, The one thing you need on every page of your website to increase conversions, so if you’re considering back to the top buttons, I’d really suggest you browse that post first, because 9 times out of 10 a Call To Action is a lot more useful than a ‘Back To Top’ button.

For moving your visitors quickly around long pages however, anchor links really are the way to go.

 

Here’s the steps.

Step 1. Set your anchor wherever you want your visitors to go with the following code. Click an insert point, then select the ‘code block.’ Delete out the content that’s in the code block and insert the following

<div id="your-anchor-link-name"></div>

Pro Tip: You can name your anchor whatever your little heart desires. If you want the name of your anchor link to be multiple words, just stick a - between the words.

Here’s two examples, a one word anchor link and a multi word anchor link:

<div id="ahoy"></div>

<div id="ahoy-ticket-sales"></div>

Alright, now we’ve set our anchor that thing isn’t going anywhere! No we’ve got to ‘attach’ our link to the anchor. I’ll show you an example first by making a bit of text into the link, and then I’ll also show you an example using an image as our link.

Step 2. Go to the place on your page that you want to link to your anchor. Highlight the text you want to be linking to your anchor. Click the little ‘link’ icon and in the text field type #the-name-of-your-anchor. 

Want to make a nice image as your link? Create your image first, I suggest Canva for a stupid simple, DIY, free graphic designing service. Then once you have your image, insert it onto the area of your page where your link should go using an ‘image block’.

Then, click over from the content tab to the design tab. In the link area drop in the name of your link again, using a # in front of it.

Click save, refresh your page and go test it out!

There yeh are matey, you’ve got our coding sealegs on yeh now! You’re prepared for even deeper, darker coding waters anytime now!

 

Looking to make a few more site customizations? These posts will get you well on your way:

So over being embarrassed by your website?

Download the Start Your Squarespace Website Workbook + kiss website shame goodbye!