Understanding how to add an anchor link in Squarespace allows you to connect navigation items, buttons, or text links to specific sections on the same page. Anchor links are a great way to enhance user experience, especially on longer pages.
This guide will walk you through the steps of adding anchor links, setting up section IDs, and improving internal navigation across your website.
What Are Anchor Links in Squarespace?
Anchor links, also called jump links, allow users to click a link and automatically scroll to a specific section on the same page. These are commonly used for:
- Smooth scrolling effect Squarespace for better UX
- Internal linking within Squarespace page for quicker access
- Creating an anchor menu in Squarespace
You can link from navigation menus, buttons, or text blocks to any section with a unique ID.
Step 1: Assign a Section ID in Squarespace
If you’re wondering how to add an anchor in Squarespace, the first step is assigning a unique section ID. This ID acts as the destination point for your anchor link and allows you to link directly to specific content blocks within the same page. Although Squarespace does not offer built-in section IDs in the standard editor, you can still add them manually using a code block or an HTML embed.Why section IDs matter
A section ID is like a label that tells the browser, "scroll to this spot." Without it, there’s no way to target a specific area of the page. When done right, this makes internal navigation feel seamless and professional—especially on single-page websites or long-scroll layouts.
Use a code block to add a section ID
Follow these steps to place an anchor at the top of a section:
- Navigate to the page where you want to create the anchor destination.
- Click “Edit” and add a Code Block above the content section or just before the heading you want to anchor to.
- Paste this line of code:
<div id="about-section"></div>
Be sure to replace about-section with a unique ID that clearly describes the section content. This ID will be used later when you create the link itself.
Good practices for choosing an ID name
- Use lowercase letters and hyphens (e.g.,
team-intro,contact-info) - Avoid numbers unless they serve a purpose (e.g.,
faq-section-1) - Don’t repeat the same ID anywhere else on the page
After this, your section is officially "anchorable"—you’ve just laid the foundation for jump links and improved navigation. Next, you'll create the actual link that scrolls users to this spot.
Step 2: Create the Anchor Link
After assigning the ID, create a hyperlink that points to it. You can do this from a text block, button, or navigation link.
Text or Button Link
- Highlight the text or select the button to edit.
- Click the link icon.
- Enter the ID as a URL with a hashtag:
#about-section
Navigation Menu Link
- Go to Website > Pages > Navigation
- Add a Link page
- Set the link to
#about-section
Step 3: Enable Smooth Scrolling (Optional)
Squarespace doesn’t include smooth scrolling by default. You can add it with a simple code snippet.
Add custom CSS for smooth scrolling
- Go to Design > Custom CSS
- Add the following CSS:
html { scroll-behavior: smooth; }
Best Practices for Anchor Links
Understanding how to make anchor links in Squarespace is only the first step. To ensure they function smoothly and improve the user experience, you’ll want to follow these proven best practices. Whether you're building a landing page or a long-scroll layout, these tips will help you avoid common issues.
Use descriptive and consistent IDs. When setting up your section IDs, choose short, relevant names that describe the content they represent. For example, use services or faq-section instead of generic terms like “section1” or “block2.” This not only improves readability but also helps if you’re managing many anchor points across a page.
Be mindful of mobile behavior. Knowing how to make anchor links in Squarespace work across all devices means testing them thoroughly. On mobile devices, anchor scrolling can behave slightly differently. Spacing can shift, and fixed headers may overlap with anchor targets. Consider adding extra padding above anchor targets to ensure smooth scrolling works consistently.
Incorporate with page layout customization. Anchor links become much more effective when used strategically with Squarespace page layout customization. For instance, combining anchor navigation with stacked content blocks, contact forms, or image galleries lets users jump directly to what matters most. This is especially useful on one-page websites or marketing funnels.
Create an anchor menu or table of contents. One of the best ways to implement how to make anchor links in Squarespace is by building a fixed anchor menu at the top of the page. This menu links to each key section, improving user flow and engagement—especially for long-scroll landing pages.
Limit the number of anchor links per page. While internal linking is helpful, avoid overwhelming users with too many jump links. Focus on the most critical sections that support user goals and improve navigation.
Advanced: Use Anchor Tags in HTML Blocks
If you want to link directly to a heading or block, you can wrap it in a custom anchor tag:
<a id="services"></a>
<h2>Our Services</h2>This can be useful for precise placement within sections.
Troubleshooting Common Issues
| Issue | Solution |
|---|---|
| Link doesn’t scroll | Ensure the ID exists and matches exactly |
| Scroll lands too high/low | Use spacing blocks to adjust anchor position |
| Anchor link opens a new page | Use a hash-only link (e.g., #about) for same-page jumps |
Useful Links
Creating One-Page Sites with Index Pages – Discover how to build a one-page website using index pages, enabling smooth navigation through anchor links.
Adding Custom JavaScript and HTML – Learn how to enhance your Squarespace website by adding custom code, such as JavaScript for smooth scrolling effects on anchor links.
Enhance Your Squarespace with Powerful Plugins!
Elfsight created dozens of useful plugins to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Squarespace!
Conclusion
Learning how to create an anchor link in Squarespace is a simple but powerful way to improve website navigation, especially on longer or single-page designs. With section IDs, custom CSS, and a bit of planning, you can enable smooth scrolling and effective internal linking. Whether you’re building new pages or enhancing existing layouts, anchor links make your Squarespace website more interactive and user-friendly.
