How to Add Anchor Links in Squarespace

Improve navigation and keep readers interested! To make page scrolling smooth, learn 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.

  • 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.
How to add anchor links in Squarespace
  • 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.

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.
  • 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.
  • 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.

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.

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.
How to add anchor links in Squarespace

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.


Can squarespace do anchor links?

Today’s video covers Squarespace anchor link setup. Anchor links work like other links, but they take you to a section on a page. So it jumps to that section.

What is an anchor URL?

A web page anchor tag links to another location on the same page. They are used on long or text-heavy pages to let visitors jump to a specific section without scrolling.

How do anchor links work?

Anchor links are links in website content that direct visitors to other pages with relevant content. Anchor links have unique identifiers that tell websites how to operate and where to send visitors.

Editorial Staff
Editorial Staff
The Bollyinside editorial staff is made up of tech experts with more than 10 years of experience Led by Sumit Chauhan. We started in 2014 and now Bollyinside is a leading tech resource, offering everything from product reviews and tech guides to marketing tips. Think of us as your go-to tech encyclopedia!


Please enter your comment!
Please enter your name here

Related Articles

Best Telemedicine Software: for your healthcare practice

Telemedicine software has transformed my healthcare visits. It's fantastic for patients and doctors since they can obtain aid quickly. I...
Read more
I love microlearning Platforms in today's fast-paced world. Short, focused teachings that engage me are key. Microlearning platforms are great...
Think of a notebook on your computer or tablet that can be changed to fit whatever you want to write...
As of late, Homeschool Apps has gained a lot of popularity, which means that an increasing number of...
From what I've seen, HelpDesk software is essential for modern businesses to run easily. It's especially useful for improving customer...
For all of our important pictures, stories, and drawings, Google Drive is like a big toy box. But sometimes the...