How to Add Anchor Links in Squarespace

An anchor link, which is also sometimes called a jump link or an in-page link, lets you move around on a webpage by sending people to specific parts of the page when they click on text or images that are linked to. Anchor links, unlike regular links that go to other websites, make it easy to move around on the same page. This tutorial shows you how to add anchor links in Squarespace.

This improves the user experience by leading them to content that interests them. Some terms make a distinction between the first link (jump link) and the final link (anchor link), but in everyday language, these terms are often used interchangeably.

Anchor links are a way for website designers to make the interface easier for people to use by letting visitors quickly find specific information without having to reload the page. This focused navigation not only makes it easier to consume content, but it also makes browsing feel more like a whole. Basically, anchor links help make webpages more accessible, which makes it easier for people to use digital content.

What Is an Anchor Link

• Links that go to other websites: These links take you to other websites or web pages. If you’ve ever been on the internet, you’ve probably seen a lot of examples like clicking on a news story headline to read the whole thing.
• These are links that take you to a different part of the same web page. On long pages, they’re often used to make it easier for people to find their way around. For example, a “Learn More” button can help you quickly get to a certain section.

Let me show you how anchor links work

• Getting to the Right Place: When you click on a word or picture, it’s surrounded by special code known as a “anchor tag.” This code has the website address (URL) of the place you want to go.
• When you click on the anchor link, your web browser reads the code and does what it’s told to do, which could be to go to a different page or a certain spot on the current page.

How to add anchor links in Squarespace

Name Your Section

• Locate the HTML code where you want to create a section link.
• Identify the <div> tag with an “id” attribute.
• Change the value inside the double quotes of the “id” attribute to your desired section name, e.g., “yoursectionnamehere.”

Create Your Section Name

• If your section name has more than one word, use a hyphen to separate them (e.g., “my-services”).
• After naming your section, click “Save” to apply the changes.

Design Your Button

• Set up a button at the top of your webpage to serve as a link to the named section.
• Determine the appropriate location for your button in the HTML code.

Set the Link for Your Button

• In the button code, find the “link” attribute or the attribute specifying the hyperlink.
• Set the value of the “link” attribute to “#sectionname,” replacing “sectionname” with the name you assigned to your section (e.g., “#services”).
• Click “Save” to save your changes.

Test Your Anchor Link

• Open your webpage in a browser.
• Locate the newly created button.
• Click on the button to test whether it navigates to the designated section.
• Verify that clicking the button leads you directly to the specified part of the page.

Benefits of Using Anchor Links on Your Squarespace Site

Better user experience and navigation

• Smooth Content Exploration: Let visitors skip straight to certain parts of long pages. This will make it easier for them to explore the content and keep them from getting tired of scrolling.
• Simple ways to get to important data: Users will find it easier to find important information if you add direct links to sections like contact forms, pricing tables, or frequently asked questions (FAQs).
• Improved Multi-Page Navigation: Show users the right parts of different pages, making multi-page navigation easier and making the whole website experience more cohesive.

Better organisation and readability of content

• Clearer Content Structure: Make it easier for readers to scan and understand by highlighting content sections and organising them in a way that makes sense.
• Adding a table of contents: You can easily make a clickable table of contents that makes it easy for users to find their way through long content.
• Organisation of FAQ Pages: Use a question-and-answer format to make FAQ pages easier to read by linking directly to specific answers.

SEO (Search Engine Optimisation) got better.

• Structured Content: Anchor links tell search engines about the hierarchy and organisation of content, which could help with indexing and ranking.
• Internal Linking: Make a web of internal links on your site to help people find content and maybe even improve its SEO value.

Choosing the Right Content for Anchor Links

Why it matters

• Match the anchor text to the content that it links to: When you make an anchor link, the words you use should accurately describe the page’s content or topic. That way, users will know what they’ll find if they click, and you won’t trick them.
• Use specific keywords: Don’t use too many keywords, but using relevant keywords in your anchor text can give search engines useful information about your content and could help your rankings.

Clarity and ease of reading

• Keep it short: Aim for anchor text that is short and descriptive. Users are more likely to click on links that are short and easy to understand than ones that are long and hard to understand.
• Do not use general phrases: Do not use general phrases like “click here” or “learn more.” It doesn’t say anything specific, so neither users nor search engines will find them useful.
• Just read naturally: Make sure that the anchor text fits in well with the sentence or paragraph that it is in. Don’t put links where they don’t belong.

Responsive Design: Ensuring Anchor Links Work on All Devices

Setting goals

• Touch-friendly hitboxes: To account for inaccurate finger tapping, make the hitbox size of your anchor links bigger, especially on mobile devices. To make the area around the link text bigger where you can click, you might want to use CSS padding or margins.
• Avoid hover states: Stay away from hover states. They can make it easier to interact with a desktop, but they won’t work on touch screens. Make small visual cues, like a slight underline or a change in colour, that show when a link is active on touch devices.

Easy access

• Clear and concise link text: Use language that describes and tells people what to do in your link text. Don’t use words like “Click Here” or “More.” Allow users to easily understand where the link leads by making it clear where it leads.
• Keyboard navigation: For people who use screen readers or prefer keyboard navigation, make sure your links can be reached with the arrow keys and the Enter key.

FAQs