Anchor Links: How to Jump to a Specific Spot on a Page
If you’ve ever wanted to send your visitors to a specific spot on a page without them having to scroll from the top to find it, you’re in luck! And you get to feel like an entire web wizard by using just a one-line smidge of code to create an easy anchor link to whisk them away with a seamless jump.
See what I did there?
Watch the Video
Watch the YouTube video for step-by-step wizardry 🪄👩🏻💻
We’ll be working in two spots:
the anchor and the link
When you’re using an anchor link (or any link, for that matter) there’s always the spot you want people to be able to jump to and the spot where they’ll initially be clicking from. Let’s start with the to — find the spot on your page that you want people to land. You’ll put your anchor at the top of this area.
Place the anchor
identify your destination
click Add Block
choose a Code block
click the pencil to edit
replace the default code with this:
<div id=section-name></div>
Things to keep in mind
It’s important to name your anchor carefully; there are a couple of guidelines to keep in mind. Call it exactly what you want to, be very specific, it’s case sensitive, you can use dashes but not spaces, and you’ll use the exact same name in the next step. Something short and descriptive is perfect like “reviews” or “contact-form”
Name your destination
use the structure: <div id=section-name></div>
replace “section-name” with something brief and clear
it’s case sensitive
no spaces (dashes are ok)
resize and drag the code block to the top of the destination area
click Save
Code block placement
Your newly named code block will be invisible, but you should still resize it so it’s small, and drag it to the top of the area you want visitors to land. Somewhere above the title of that section is perfect. Make sure none of the other neighboring blocks have been shuffled around, and be sure to check your layout and resize your code block in mobile view, too.
Create the link
identify where you’d like to link from
create a button or text and go to the link menu
click the gear, then select Page
from the list, select the destination page where you built your anchor
click Save, but don’t click Apply just yet
click into the text box where it lists the page you selected
add a hashtag (#) and the exact name you called your anchor link
here’s the structure: yoursite.com/page#section
or even: yoursite.com/blog/blog-title#section-name
click Apply
Test it out
Go to your live site and click your new link, or copy and paste it into your browser and watch the magic happen! You’ll be seamlessly transported to your anchor destination. Well done!
Boom! Nailed it. Great job!
Dive into custom Squarespace web design with confidence! Now you can direct people anywhere you want on your site with no tedious, unnecessary scrolling. Straight to the FAQs? No problem. Navigate to a particular image? Easy.
If this guide helped you, show some love! Subscribe to my YouTube channel, leave me a note, and tell me what else you'd like to learn. Happy designing!
Get insider access to my exclusive updates
(no spam, I promise)
Your Designer
I’m Kessiah, Squarespace website designer for happy visionaries of all industries. I work with businesses and brands of all shapes and sizes, including startups, corporations, agencies, nonprofits, and solopreneurs. If you’ve got a project you’d like to discuss, you can email me at hello@kessiah.com, leave me a note here, or book in for a free 15 minute consultation call here to tell me all about what you have in mind.
