You want your website to be as easy to use as possible. The last thing you want is for viewers to navigate away from your site because they can’t find what they need or there’s simply too much information for them to sort through.

One way to simplify your pages for viewers is by adding anchor links or linking to a specific section on your page.

If you’ve ever used a “jump to recipe” button on a food blog, you get the idea. Sometimes a viewer is in a hurry and just needs to get to the good stuff. You can make life easier for them by creating links on the page to help your audience find what they need quickly.

When To Use Anchor Links On Your Website

The short answer is to link to a section on any long post/page.

Here are a few examples…

Recipe blogs - As I shared above, these are essential since viewers are often cooking when they use your recipe and may need details quickly. They may not have time to scroll through the whole post.

Long-form content - If you’re creating a guide to anything, it’s a good idea to outline and break your content into sections for people to skip ahead to what they need to know.

Sales/product pages - You may have a lot of information encouraging your audience to buy from you, but they may be ready to check out long before they get to the end. Adding links to quickly scroll to the checkout button area will help seal the deal.

Customer support pages - FAQS, support, terms/policy pages can get fairly long. Adding anchor links will help your customers find what they need and prevent unneeded frustration or emails to you.

Back to top links - It’s pretty common for users to navigate away from your website at the bottom of pages because they aren’t sure what to do next. Creating a “back to top” button can keep them on your website longer.

How To Add Anchor Links In Squarespace 7.1

Add A Code Block As Your Anchor

Navigate to the section you want your link to jump to and add a code block there. This is your anchor - the goal section where you want viewers to end up. Inside the code block, add this text…

You’ll replace the “Your-title” wording with the title you want. If you end up creating more anchor links, you’ll want to make sure to use a unique divider title for each one.

Note: This code block will be invisible unless you hover over it, so don’t forget where you placed it in the section!

Create A Link For Your Audience

This link can be in the form of a text or a button, just as long as it’s easy for your viewers to find. Instead of adding a page URL as the link, you’ll add that unique title you created with a hashtag, like this…

#your-title

Note: Make sure it’s a hashtag and not a slash, or your viewers will end up at a 404-page.

That’s it! Wasn’t that easy?

Now you should have a working anchor link that makes life so much easier for your audience! I hope this was helpful! Let me know what other CSS tricks you’d like to learn!

Ready to try it out in a template? Choose your favorite template here.

More Like This...