Squarespace Help: How to Create Anchor Links
You know when you pick a book you think might have what you need? So you head to the table of contents and skim through to find your topic of interest before heading directly to the page number. Anchor links work the same way but for web pages.
At Spaceworks Studio, we are always thinking about how to create the most user-friendly Squarespace websites for our clients. We’ve executed briefs, for example, that were simple one-pagers with long form content and different bits and parts that are quite important to the client’s business. Some of these often require ‘jump links’ (also known as anchor links) in the navigation bar or right at the top so website users can easily go straight to the info that is most relevant to them. We’ve included a few examples below to demonstrate how this works:
Click any of the titles below to jump to your preferred section
Benefits of Anchor Links to Websites
Anchor links are very useful for improving a website’s accessibility. This is because they enable users, including those with disabilities, to reach desired content easily. Even more, they can be used in external communications, such as emails or social media, to direct audiences to specific content.
Utilising anchor links on a different page is also useful if you are referencing a section in an article, and you want users to be directed to the exact section when they click on the article link. By allowing users to quickly jump to relevant content without scrolling through long pages, anchor links greatly improves user experience.
Outside this, anchor links can also be quite useful for SEO (Search Engine Optimisation). They work to help improve a website's visibility in search results. And structured content with clear sections helps search engines better understand and index the different parts of a page.
Curious about Squarespace?
Squarespace is a user-friendly website building and hosting platform designed to help create professional websites without needing any coding skills. It offers customizable templates, drag-and-drop design tools, and integrated features such as e-commerce, blogging, and SEO.
Founded in 2003, the platform has released several versions over the years. After it upgraded its version 5.0 to 6.0 in 2011, it subsequently released two separate versions, 7.0 and 7.1, which are mostly in use today.
How to Create Anchor Links With Code in Squarespace 7.1
The procedure for creating an anchor link with code on Squarespace 7.1 is the same procedure for version 7.0 below
It is important to note that this procedure for creating jump links on Squarespace 7.1 can also be applied to Squarespace 7.0; both the 7.1 fluid engine and the 7.1 classic editor.
Step 1 - Create a code block
1.1. The first step to creating an anchor link is to create a code block. To do this;
Open the page editor.
Add a code block to the section you want the link to jump to.
However, you cannot add code blocks to sections like galleries, collection pages, or auto layouts on Squarespace 7.0. This can only be done on version 7.1. This is because, on 7.0, these sections are pre-built with particular functionalities.
1.2. Now add the code below to the block:
<div id="REPLACE-THIS-ID"></div>
Change the “REPLACE-THIS-ID” text to the name of the section where the link will jump the user to. For example, if you want your users to be taken to a section titled “Phase”, the ID will be labeled “phase”. For example, <div id="phase"></div> . Also, note that the words are case-sensitive, so be sure that the lower-case and upper-case letters in the name of your section match that of your ID in the code. If your ID name is more than one word, each word in the ID should be separated with a dash and not a space.
For example, if your ID is ‘See Phase Five’
𝙓 <div id="See Phase Five"></div>
✓ <div id="See-Phase-Five"></div>
Ensure that the ID you created is different from other codes on your site to avoid any coding conflicts.
1.3. Click apply.
Step 2 - Set up the link
The next step is to set up the link that the users will click. This could be a text, navigation, image, or button link.
2.1. Go to the section where you want the anchoring link to appear.
This could be some text at the beginning of your blog article. However, using a text link as an example:
Highlight or select the text to be linked.
Click the link icon
Instead of a URL, type your ID with a hash e.g #See-Phase-Five
Click add link.
And You are done!
However, for anchor links you’re setting up in Squarespace’s navigation menu or buttons on other pages, it can be helpful to use the full-page URL. To do this:
Add the website URL, including your website slug. Then end it with a slash ( / ) e.g., https://website.com/websiteslug/
Follow the slash with a hashtag # and the unique ID you created in Step 1 e.g., https://website.com/websiteslug/#See-Phase-Five
You can make the link always open in the same tab or a fresh tab. To control this, activate the ‘Open Link in new tab’ command.
Finally, tap Enter to complete the link creation process. Once done, save and publish.
Do you need some extra support with setting up your anchor links?
How to Create Anchor Links in Squarespace 7.1 (and on blog pages) Without Code
Squarespace 7.1 allows you to create anchor links with the classic editor if you don't have any idea of code. In Squarespace 7.1, each page has sections with their block IDs. Whenever you create a block on your site, a new ID is created for that block. These block IDs are built into the code of Squarespace, so they’re not overtly visible.
The Squarespace ID finder is a Google Chrome plug-in that reveals the block IDs of each section. Once you’ve downloaded and activated the Squarespace ID Finder Chrome extension, you can follow the steps below to create your anchor links in Squarespace 7.1.
Step 1: In your Squarespace editor, open the webpage where you want to create the anchor links.
Step 2: Click on the extension to reveal the block IDs on the webpage.
When you click on the extension, some number sets will pop up.These number sets are the block IDs that represent page sections on the page. They should look something like this, ‘section[data-section-id="5t5e82f44b28he9y3bsib347"]’
Step 3: Find the ID that represents the destination of your anchor link.
Step 4: Click the block ID to copy it to your clipboard.
Step 5: Navigate to the section you want to put your anchor link. This can be a video, a button, text, and so on.
Step 6: Click the link function 🔗, and paste the block ID in the space for ‘clickthrough URL’.
It should look like this: section[data-section-id="5t5e82f44b28he9y3bsib347"].
After you paste the ID, remove every text before the number, and replace it with #page-section.
The final result should look like this: #page-section-5t5e82f44b28he9y3bsib347
Once done, click APPLY, then save your changes.
You might have noticed your anchor links tend to jump a little too abruptly, don’t worry, we’ve got you covered. For a smoother scrolling experience when navigating to your desired section or block, check out the How To Make Anchor Links Scroll Smoothly section later on in this article.
How to Create an Anchor Link on Squarespace 7.0
The procedure for creating an anchor link with code on Squarespace 7.0 is the same procedure for version 7.1 above.
Squarespace 7.0 was released in 2014. It is a drag-and-drop editor and is super solid for creating business websites. If you are a web designer, or you are tech-savvy, you can create anchor links on Squarespace 7.0 on the same page, with code. However, if you are averse to anything code, or you are on the Squarespace personal plan, don’t fret. There is a provision to create anchor links without code also on Squarespace 7.0.
How to Create Anchor Links Without Code on Squarespace 7.0
To create anchoring links on Squarespace 7.0 without code would require adding an index page. In this case, index pages are a unique type of homepage by Squarespace in version 7.0 that allows you to create anchor links. Simply put, they are a collection of pages within a page.
You should note though, that only some templates support index pages. However, the supported templates for the index page anchor linking include the Pacific, Bedford, Naomi, Charlotte, Brine, and Horizon templates. Once your template is set up, you can follow the steps below to create your anchor links.
Step 1 - Add an Index page. To do this:
Click pages in the home menu.
Click the + icon
Select Index
Then add a title to the index page
You can add an existing page to your index, this is called stacking. To do this, go to your pages panel and drag the existing page, then drop it in your index page section. Or, you can click ‘Add page’ under your index page, to add a new page.
Step 2 - Get the URL of the destination page (the page you want the link to jump to). To do this:
Navigate to the Pages panel
Find the page section you are linking to
Click the gear icon ⚙️ to see the page section’s settings
Copy the URL slug e.g /accommodation or /contact-us
Step 3: Set up your link.
While your link can be in any format, we will use the text format for this illustration. To set up your link:
Return to the page you want the anchor link to be.
Navigate to the desired text block you desire to have the anchor link.
Click edit to see various content blocks i.e. images, audio, lines, text, and so on.
Select the text content block and tap the link icon 🔗
Step 4: Paste the slug URL from Step 1 in the link space
Replace the (/) slash sign in the slug URL with a hashtag # in the URL space, (e.g. instead of /accommodation, it should be #accommodation or #contact-us)
Disable the “Open Link in new tab” command
Click Enter
Note: Every template’s index has its options. When using the Charlotte, Naomi, Pacific, and Horizon templates, add ‘section’ to your anchor link (e.g., #accommodation-section or #contact-us-section). For better functionality, also remember to use hyphens (-) between words when creating anchor links.
How to Create an Anchor Link to a different page
How to Create an Anchor Link to a Different Page with Code
Step 1: Select the section which is the anchor link destination.
This anchor link destination could be a text block, an image, and so on.
Step 2: Open a code block above it.
Once you open a code block, add the code below:
<div id="yoursectionnamehere"></div>
Change ‘yoursectionnamehere’ to the name you want for that section, and be sure to include quotation marks and hyphens. For example, <div id=“what-our-clients-say-about-us”></div>
Once done, SAVE.
Step 3: Create a navigation button.
Return to the source page (the page you want the anchor link to be on), and create a button.
Click the ‘link’ function 🔗
Note that because this anchor link is jumping to a section on a different page, you need to include both the page name and the section name in the code.
So, instead of just using the section name (#sectionname), use this format: /page-name#sectionname.
This is because anchor links by default attempt to look for the section on the same page, not a different page.
For example, if you want to link to a section called ‘what-our-clients-say-about-us’ on a page named reviews, then the format would be: ‘/reviews#what-our-clients-say-about-us’
Once you input your code into the link space, apply, and save.
How to Create an Anchor Link to a Different Page Without Code on Squarespace 7.0
Not a programmer? That’s fine. It’s possible to anchor-link a section from one page to another without code. You should note, though, that this method applies to Squarespace 7.0, not 7.1. Once you’ve added your index page with sections (also called stacks), then you can begin.
Step 1: Identify the slug of the section you want the anchor link to be.
In your stacked index page, every section has a unique identifier known as a slug (a short descriptive name) used in its URL. Go to the section settings to find its slug.
For example, you can have a stacked index page with three sections named, ‘Newsletter Archives’, ‘Subscribe’ and ‘Leave a Message’. The slug for the Subscribe section would be, ‘subscribe’.
Step 2: Copy your section slug e.g, ‘leave-a-message’, or ‘subscribe’
Step 3: Create your anchor link.
From here on, it’s pretty simple.
Open the link editor 🔗
Add the destination page URL then the section slug. before the anchor link between two slash // symbols (e.g. https://website.com/indexslug/#pageslug
Tap Enter once done.
If your website domain is registered with ‘www’, add it to your anchor link URL.
How To Make Anchor Links Scroll Smoothly
Anchor links are also called jump links for a reason. They seemingly jump you directly to your section of interest. If that isn’t your cup of tea, you can opt for a smooth scroll, and all you need is some simple CSS code.
To get started,
Go to your design settings
Select the CUSTOM CSS section of the editor.
Once your editor opens, paste the code below:
html {
scroll-behavior: smooth;
}
FAQS
-
No, you cannot. To avoid coding conflicts, only one ID can work for each page. So, if you have used an ID named ‘books’ on your service page, you cannot use the same ID on that page anymore. You would have to tweak it to say, for example, ‘our-books’ or ‘books-sold’.
-
IDs are always case-sensitive. If the link has an ID registered as “#Books,” the HTML must also have it as “id=Books”. Using “id=books” would not work because of the lowercase b. Consistent capitalization, punctuation, and numbering ensure code readability and also prevent potential code conflicts.
-
Usually, the ID appears as part of the page’s URL when the anchor link is clicked.
-
Yes, you can use any text for your unique ID. However, an ID that's not difficult to remember (or ideal enough) helps you set up easily and troubleshoot. An example is “#bottom” which we highlighted for a “Go to footer” link.
-
Typically, the landing text appears in the address bar. In some cases, you'll find it as high as possible on the page if there is limited content below it.
However, you can make it not appear at the top of your tab by adding “<p>” tags (or “<p> ” for HTML) tags with non-breaking spaces to the landing text. This will add more space and pull it downwards.
-
You cannot link to sections that do not support blocks. However, there's an alternative way you can:
Create a blank section above the destination section
Add your code block and create your anchor link
Find the “Edit” section in the blank section and turn off the “Fill Screen” command to avoid inconvenient gaps created by the blank section.
-
Every anchor link must align with the page slug and primary domain, as it was registered originally. But if you change your domain or page slug, you must adjust the anchor link too.
-
To test your anchor link, copy the link to a new browser tab and see if it navigates to the intended section of the page. Make sure the ID in the link matches the ID in the target element exactly, including case sensitivity. If it doesn’t work, double-check for typos or case mismatches.
-
You can use numbers and hyphens in your anchor link IDs. However, avoid spaces and special characters like @, $, %, etc. It is better to use a combination of letters, numbers, and hyphens for readability and functionality.
-
You can style your anchor link using CSS. Assign a class to your anchor link, then define the style for that class in your CSS. For example, if you want to style your link to be bold and have a blue color, write in your CSS:
.special-link {
color: blue;
font-weight: bold;
}
-
Anchor links help your site’s users enjoy a pleasant experience by allowing them to quickly navigate to specific sections of a page. This is useful for long pages with a lot of content, such as FAQs, terms of service, or detailed guides.
-
Search engines appreciate well-structured content that helps users find information quickly. But while they contribute to your site's SEO quality, they do not directly influence rankings like keywords or backlinks do.
Conclusion
Anchor links are powerful tools for helping visitors navigate through your Squarespace website. By allowing users to jump directly to specific sections, you can make lengthy pages more manageable and improve accessibility. These qualities improve their user experience and impact your SEO positively.
At Spaceworks Studio, we can help set up your anchor links alongside any other extra touch you need to give your Squarespace website a professional look-over
