How to Use Anchor Links to Jump to a Specific Spot on a Page
One of the best ways to improve both your website user experience and SEO is to make your content easy to navigate.
When visitors land on one of your pages or blog posts, they should be able to find exactly what they are looking for.
Which means…long posts or pages can be a problem. As great as longform content is, it can sometimes be frustrating for your viewers if they have to scroll through a bunch of text before finding the information they need.
That’s why it’s helpful to add anchor links to your pages, so your website visitors can go straight to the content they are looking for.
Adding anchor links to your Squarespace website is very easy. And it can even be fun, because you get to name your page sections!
What Are Anchor Links?
Anchor links are a type of internal link that lead to a particular section on a page. They typically go to another section on the same page, but they can jump to a section on another page as well.
Even if you weren’t aware of it, you have probably seen plenty of anchor links.
Example ToC from Wikipedia
Have you ever clicked on a blog post and noticed a neat table of contents at the top of the post? Each entry in the table of contents links to a subheading on the page, so you can directly click to the topic you want to read about.
This is just one example of anchor links, and how they can improve your user experience by making page navigation easier.
Although they are most commonly used in a table of contents at the top of the post, that’s not the only place you can use anchor links.
For example, let’s say you have a paragraph where you are referring to a visual or graph somewhere else on the page. Instead of adding the same visual to two different spots on your page, you can simply link from your paragraph to the section with the graphic.
Or if you have multiple sign-up CTAs on a page, you could link each of your CTAs to your newsletter sign-up form at the bottom of the page.
These are just two examples of ways you can use anchor links. You’ll find they come in handy in quite a few situations!
Note: It’s easy to confuse the term ‘anchor link’ with ‘anchor text,’ but they are not the same. ‘Anchor text’ simply refers to the words that are hyperlinked, no matter what kind of link it is.
How to Add Anchor Links in Squarespace
Adding anchor links in Squarespace uses the same code you would use for WordPress or any other website builder. Basically, in order to link to a section of your page, you first have to ‘name’ your page sections. Watch the tutorial video below for detailed instructions!
Note: This video is several years old, so the Squarespace editor looks very different now. However, the concept is still the same. You still have to add a code block at the beginning of each section you wish to link to.
The following code is used in the video.
<div id="service-1"></div>
Use this snippet of code to name each of your page sections. Basically, you are giving each section a unique ID, which is why the code follows the format id=”name”.
Once you name your sections, you can go and actually add your anchor links to buttons or text on your website.
Because anchor links don’t leave your website page, you don’t even need to add the full link! Instead, just type out ‘# + ID’ in the bar for the link. For example, if your section ID is ‘conclusion,’ then your link would simply be #conclusion.
Bonus: Smooth Scroll
If you would like your page to smoothly scroll down the page instead of jump, then copy and paste the following code into the top of your Custom CSS. You can find this in Design > Custom CSS.
html { scroll-behavior: smooth; }
