Squarespace Member Areas: What Designers Need to Know

Education

5 May

Anchor links are one of the simplest but most underused features in web design. They let users jump directly to specific sections on a page. They're useful for table of contents, navigation menus, and single-page sites. But they only work if you set them up correctly.

In Squarespace 7.1, anchor links are straightforward. You need section IDs, link anchors, and the right CSS for smooth scrolling. Let's go through all of it.

How Anchor Links Work in Squarespace 7.1

An anchor link is just a URL with a hash. example.com/services#design points to the section with ID "design". When you visit that URL, the browser jumps to the element with that ID.

In Squarespace, sections have IDs assigned automatically. You can view them by inspecting a section in your browser's DevTools and looking for the id attribute. You can also manually set custom IDs if you prefer specific names.

An anchor link is just a normal link that points to #sectionid instead of another page.

Creating Section IDs in Squarespace

In Squarespace 7.1, sections have IDs, but you can't directly edit them in the visual editor. You have to go to Settings, Advanced, Code Injection, and edit the HTML directly. Or, you can use a workaround: assign the section a custom CSS class, then target it with an anchor link.

The better method: use Squarespace's URL field. In the editor, click the section settings, look for the "URL" or "Anchor" field (depending on your Squarespace version), and enter your custom ID. Some versions call it "Section ID". If your version has this field, use it.

If your version doesn't expose the ID field, use the Settings, Code Injection workaround. Add a data attribute or custom ID to the section's HTML directly. It's not ideal, but it works.

For practical purposes, if your section contains a heading like "Services", Squarespace often auto-generates an ID like "services-1234". You can link to that directly without changing anything. Test by right-clicking the section and inspecting it in DevTools to see what ID Squarespace assigned.

Linking to Sections From Navigation and Buttons

Once you have section IDs, linking to them is simple. Create a text link or button and set its URL to #sectionid.

If you're using Squarespace's navigation menu, you can link to any section on the page. In the navigation settings, choose "Link" and enter #services or whatever your section ID is. When someone clicks that navigation item, they jump to that section.

For buttons, set the link to the anchor. In the button settings, enter the URL as #contact or #pricing. The button now jumps to that section when clicked.

You can also link to anchors from a different page. If you have a Services page and want the homepage navigation to link to #services, the URL is /services#services (page URL, then anchor).

The Scroll Offset Problem and How to Fix It

Here's a common problem: when a user clicks an anchor link, the page jumps to that section, but the section is hidden behind a sticky navigation header. The content you wanted them to see is covered up.

This happens because the browser jumps to the section's top, but doesn't account for the fixed header height. The solution is CSS scroll padding.

If your sticky header is 80 pixels tall, add this to your CSS injection:

html {
  scroll-padding-top: 80px;
}

This tells the browser to add 80 pixels of padding when jumping to an anchor. Now when someone clicks an anchor link, the section scrolls into view with proper spacing below the header.

Adjust the 80px value to match your header height. If you're unsure, use your browser DevTools to measure the header.

Smooth Scrolling CSS

By default, anchor links jump instantly. The page scrolls to the section with no animation. Smooth scrolling adds a nice visual transition.

Add this to your CSS injection:

  
    html {
  scroll-behavior: smooth;
}
  

That's it. Now anchor links smoothly scroll instead of jumping. The scroll speed is determined by the browser, not by you, but it's usually around 1 second for longer scrolls.

Combine this with scroll-padding-top:

  
    html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
  

Now clicking an anchor link smoothly scrolls to the section with proper spacing below a sticky header.

Linking to Anchors on Different Pages

You can link to an anchor on a different page. The syntax is /page-url#anchor-id.

If you want to link from the homepage to the Services section on your Services page, the link is /services#design (assuming your page slug is /services and the section ID is design).

Test this by publishing the page, navigating to it, and verifying the anchor link works. The page loads, then smoothly scrolls to the target section.

This is useful for linking from index pages to specific items, from blog posts to related sections, or from external sites to specific content on your page.

Using Anchor Links for Single-Page Sites

Single-page sites are built entirely on one page, with different sections representing different "pages". Navigation items link to #about, #services, #contact, etc. instead of linking to different URLs.

To build a single-page site in Squarespace: Create one page (usually the homepage). Add multiple sections for each content area (About, Services, Portfolio, Contact). Assign unique IDs to each section. Create navigation links pointing to each section's ID (#about, #services, etc.). Users navigate by scrolling or clicking menu items, staying on the same page.

This approach works well for small sites or portfolios. It's smooth, no page reloads, and feels fast. The downside: each "page" is actually a section on one page, which can make the page very long if you're not careful about section height.

Common Issues and Fixes

Issue: anchor links don't work. The page doesn't jump to the section. Fix: verify the section ID matches the anchor in your link. #services should point to a section with ID "services" (case-sensitive). Use DevTools to inspect the section and confirm its ID. Issue: the section is hidden behind a sticky header. Fix: add scroll-padding-top to match your header height. Issue: the anchor link jumps to the wrong section. Fix: you probably have multiple sections with similar IDs. Squarespace assigns IDs like services-1, services-2, if you have multiple sections with the same name. Link to the specific ID, not just "services". Issue: smooth scrolling is too fast or too slow. Fix: scroll-behavior: smooth uses the browser's default speed. You can't control it with CSS alone. If you need custom scroll speed, you'd need JavaScript.

Advanced: Custom Scroll Speed With JavaScript

If you need to control scroll speed precisely, you can use JavaScript. Add this to your Code Injection (Header):

  
    <script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
});
</script>
  

This adds smooth scrolling to all anchor links. You can customise it further to control scroll speed, offset, or add callbacks for animations. But for most projects, CSS scroll-behavior: smooth is sufficient.

Testing Anchor Links

Test anchor links thoroughly before publishing: Click each navigation item and verify it jumps to the correct section. Check that sections are visible and not hidden behind sticky elements. Test on mobile. Make sure anchor links work and offset properly on small screens. Test from a different page. If you link to an anchor from another page, verify it loads and scrolls correctly. Check in different browsers. Anchor link support is universal, but smooth scrolling can have slight variations.

Wrapping Up

Anchor links are a simple feature with big benefits. They improve navigation, reduce page jumps, and create a smoother user experience. In Squarespace, they're straightforward to implement: assign section IDs, create links pointing to those IDs, add CSS for smooth scrolling and proper offset, and test thoroughly.

Most Squarespace sites don't take advantage of anchor links. That's a missed opportunity. A well-implemented anchor link system makes navigation feel fast, intentional, and polished. It's a small detail that your users won't consciously notice, but they'll feel the difference.