Have you ever wished you could quickly direct visitors to specific sections of your Squarespace website without making them scroll endlessly? That’s where anchor links come in handy. Also known as jump links, anchor links are a powerful tool that can significantly enhance your website’s user experience and navigation.
In this guide, we’ll explore everything you need to know about creating and using anchor links in Squarespace. We’ll cover when to use them, how to set them up for both same-page and different-page navigation, and some key things to keep in mind when working with anchor links.
When To Use Anchor Links In Your Squarespace Website?
Anchor links can be incredibly useful in various situations. Here are some prime examples of when to consider using them:
- Long-form content: If you have lengthy blog posts or pages, anchor links can help readers jump to specific sections.
- FAQ pages: Allow visitors to quickly find answers to specific questions without scrolling through the entire page.
- Single-page websites: Create a smooth scrolling experience between different sections of a one-page site.
- Product pages: Help customers navigate to important information like specifications, reviews, or pricing.
- Table of contents: Offer an easy way for readers to navigate through different sections of an article or guide.
- “Back to top” buttons: Provide a quick way for users to return to the top of a long page.
- Landing pages: Guide visitors to key information or call-to-action sections without overwhelming them.
It’s worth noting that the process of adding anchor links can vary slightly depending on which version of Squarespace you’re using. This guide primarily focuses on Squarespace 7.1, which is the latest version as of 2025. However, many of these techniques also work for Squarespace 7.0. We’ll point out any significant differences between versions where relevant.
How To Create Anchor Links In Squarespace
You can create two types of anchor links in Squarespace: same-page links and different-page links. Let’s explore how to set up each type.
1. Creating An Anchor Link For The Same Page
Let’s start with creating anchor links that navigate to different sections within the same page. This is perfect for long-scrolling pages or when you want to help visitors quickly jump to specific content without leaving the current page.
Step 1: Choose your anchor point
Decide where you want the link to take visitors on your page. This could be a specific heading, paragraph, or section. For example, you might want to link to a “Pricing” section on a long sales page.
Step 2: Add a Code Block
Navigate to the section you’ve chosen as your anchor point. Click the “+” icon to add a new block, then scroll down and select “Code” from the list of block options. This will insert a Code Block just above your chosen content.
Step 3: Enter the anchor code
In the Code Block, paste the following HTML:
<div id=”your-anchor-name”></div>
Replace “your-anchor-name” with a descriptive name for your anchor. Use hyphens instead of spaces. For our pricing example, you might use:
<div id=”pricing-section”></div>
Step 4: Create the link
Now, go to where you want to place the clickable link. This could be in your page’s introduction or navigation menu. To create a text link:
- Highlight the text you want to make clickable
- Click the link icon in the text editing toolbar
- In the URL field, enter a hashtag (#) followed by your anchor name For our example: #pricing-section
For a button link:
- Add a Button block where you want the link
- Click the button to open its settings
- In the “Link” field, enter #pricing-section
Step 5: Save and test
Click “Apply” to save your changes, then click “Save” in the top left corner to update your page. Preview your page by opening it in a new tab. Click your newly created link to ensure it smoothly scrolls to the right section.
2. Creating An Anchor Link For A Different Page
Now, let’s explore how to create anchor links that not only take visitors to another page on your site, but also direct them to a specific section on that page. This is useful for creating more targeted navigation experiences across your entire Squarespace website.
Step 1: Set up the anchor on the target page
First, navigate to the page you want to link to. Follow steps 1-3 from the same-page method to create an anchor point on this page. For example, if you’re linking to a specific product on your “Services” page, you might create an anchor named “premium-package”.
Step 2: Note the page URL
Look at the URL of the page containing your anchor. The part after your domain name is the “slug”. For example, if the full URL is “yoursite.com/services”, the slug is “services”. Make a note of this.
Step 3: Create the link
Return to the page where you want to place the link. To create a text link:
- Highlight your chosen text
- Click the link icon
- In the URL field, enter a forward slash, then the page slug, followed by a hashtag and your anchor name. For your example: /services#premium-package
For a button or image link:
- Select your button or image block
- In its settings, find the “Link” field
- Enter the same format: /services#premium-package
Step 4: Save and test
Click “Apply” to save your link settings, then “Save” to update your page. Open your site in a new tab and test the link. It should take you to the correct page and automatically scroll to your specified section.
Step 5: Troubleshoot if needed
If the link isn’t working as expected:
- Double-check your spelling and make sure you’re using hyphens, not spaces
- Verify that you’ve included the correct page slug
- Test while logged out or in an incognito browser window
If using the Pacific template, try adding “-section” to the end of your anchor name. You can also change the template according to your specific needs.
Things You Need To Know About Squarespace Anchor Links
To make the most of anchor links in Squarespace, keep these important points in mind:
Different types Of links
- Text links: Can be applied to any text on your page
- Button links: Great for clear call-to-action anchors
- Image links: Turn images into clickable anchor links
Page Slugs
- Always use the correct page slug when linking to a different page
- For the homepage, you can omit the slug and just use “/#anchor-name”
Limitations
- Anchor links don’t work in Squarespace’s preview mode; test on your live site
- You can’t add anchor links to gallery sections or collection pages
- Each anchor ID must be unique on a single page
Troubleshooting Tips
- If links aren’t working, double-check your spelling and make sure you’re using hyphens, not spaces
- Ensure you’re using the correct page slug for different-page links
- Test your links while logged out or in an incognito browser window
To avoid such issues, it is best to use Squarespace AI website builder, which will help you create your visionary website with minimal effort.
Mobile considerations
- Test your anchor links on mobile devices to ensure they work properly
- Be aware that some mobile browsers may handle anchor links differently
Ajax And Anchor Links
- If your template uses Ajax loading, it may interfere with anchor links, especially on mobile
- You can temporarily disable Ajax in site styles to test if it’s causing issues
Best Practices
- Use descriptive, memorable anchor names
- Keep anchor names short and relevant
- Avoid using special characters in anchor names
- Consider adding smooth scrolling with custom CSS for a better user experience
Conclusion: Add Anchor Links In Your Squarespace Website For Flexible Navigation
Anchor links are a powerful tool for improving navigation and user experience on your Squarespace website. By implementing them strategically, you can guide visitors to important information, enhance the readability of long-form content, and create more engaging, user-friendly pages.
Remember to test your anchor links thoroughly, especially across different devices and browsers. With practice, you’ll find creative ways to use anchor links that best suit your website’s needs and your visitors’ expectations.
By mastering the art of anchor links in Squarespace, you’re taking a significant step towards creating a more accessible and enjoyable website for your audience. So go ahead, start experimenting with anchor links, and watch as your site becomes more navigable and user-friendly!
