Create quick jumps or anchor points in Squarespace
There's a very simple way to make those long pages filled with your awesome content easier to read.
And if you're already providing a "table of contents" of sorts, so your audience knows which points you'll be touching in your blog post or info page, you're halfway done!
Today's bite-sized code trick is all about how to create quick jumps (aka anchor links or anchor points) inside long pieces of content – and between pages in your site – with just two lines of code!
To create an anchor point you need two parts:
- The landing place of the jump (the anchor).
- The link that will get you there.
Depending on the type of page you're using, the first one can be done with either a code block or by using the URL slug of your section.
Using a code block
You can either create an empty div and place the block right before the title where you want to land, like so:
Or create your heading inside the code block instead:
In any case, you need to give the div or heading inside the code block a specific ID. That id is what we'll use as a link later on to create the jump.
If you want to go with the first option, the empty div, your HTML would look like this:
And if you want to go the second route and turn the actual heading into an anchor, then this would be your HTML (I'm assuming you're using a Heading 3, but you can use any tag you want, even paragraph):
<h3 id="unique-id-here"> This would be your content section title </h3>
Using an index page
If you want to jump to a particular section inside an index page, you don't need the code block from before! The URL of your section is already the ID you need to use in your link.
So if your URL slug for the place you want to land is /this-one then the ID will be #this-one
Note: if you're using the Pacific template, when setting your link you need to use the word -section as suffix, so if your section's URL slug is /this-one, your ID would be #this-one-section
Creating the quick jump
Now all that's left to do is create a regular link wherever on your page where you want people to click, and use the ID selector as the URL: #unique-id-here or #this-one for indexes or #this-one-section for indexes in the Pacific template
How to create a quick jump to a section on another page
Now, what if you want to have someone click a link and send them to a specific part of another page?
Simple, you just need to adjust the URL you're giving your link!
Let's say you want people to click a button that takes them to your contact form on another page, depending on the type of page you're using to contain that form you can use one of the following approaches:
- If you're using a regular page (no index page) then simply add one of the HTML blocks from before wherever you want people to land. Remember you can use either the empty div or the code block with the heading, just make sure to give it a unique ID.
- If the page is an index page, then again you don't need to add the HTML at all, it's even quicker! Just like before, you can use the URL slug of your index section.
Next, we also need the URL slug of your whole index page, the one you click to see the entire page.
So if for example your contact form is inside your Start Here page, your URL slug is probably /start-here
Putting it all together, the link you'll need to use will be /start-here#id
Note: if you're using an HTML block to create your anchor, then #id will be replaced with whichever name you set as the ID for the block (e.g. #unique-id-here). If you're using an index page section as the anchor, then #id will be replaced by its URL slug, in this example it would be #this-one or #this-one-section if using the Pacific template.
And there you go! Now you can add quick jumps, anchor links or anchor points to any part of your Squarespace site with just two lines of code!
Until next time,