Squarespace Anchor Links Not Working

Anchor Link Not Scrolling at All

Section Slug Not Set

The most common cause - the target section does not have a URL slug assigned. Click on the section you want to link to, open section settings (pencil icon or gear icon), and look for the URL Slug field. Enter a short, descriptive slug using lowercase letters and hyphens (like services, about-us, or contact). Save the section. Without a slug, there is nothing for the anchor link to target.

Link Format Incorrect

The anchor link must use the correct format. For same-page links, use #slug-name. For links from other pages, use /page-name#slug-name. For links that work from any page on your site, use /#slug-name (with a leading forward slash). Missing the hash symbol, misspelling the slug, or using the wrong format are all common causes of non-functioning anchor links.

Case Sensitivity Mismatch

Anchor slugs can be case-sensitive in some browsers. If your slug is about-us but your link references #About-Us, it may not work in all browsers. Use lowercase consistently for both the section slug and the anchor reference. For a complete anchor link setup guide, our article on linking to sections in Squarespace covers every step.

Anchor Link Scrolls to the Wrong Position

Fixed Header Covering the Target

This is the second most common anchor link issue. When the browser scrolls to the section, the fixed (sticky) navigation header overlaps the top of the section. It looks like the link scrolled too far - the heading of the target section is hidden behind the header.

Fix: add CSS to offset the scroll position. Use scroll-margin-top on your sections to account for the header height:

.page-section { scroll-margin-top: 80px; }

Adjust the pixel value to match your header height - typically 60 to 100 pixels. Test by clicking the anchor link and verifying the section heading is fully visible below the header. For CSS implementation, our guide to adding custom CSS to Squarespace covers scroll offset techniques.

Multiple Sections with the Same Slug

If two sections have the same URL slug, the browser scrolls to the first one it finds in the page source - which may not be the one you intended. Each section slug must be unique within a page. Check all section slugs and rename any duplicates.

Anchor Link Works on Desktop but Not Mobile

Mobile Header Height Different

The mobile header is typically a different height than the desktop header. Your scroll-margin-top CSS may account for the desktop header but not the mobile one. Add a media query with a different offset for mobile:

@media screen and (max-width: 768px) { .page-section { scroll-margin-top: 60px; } }

Mobile Browser Address Bar

Mobile browsers (Safari, Chrome) show and hide the address bar as visitors scroll, which changes the viewport height. This can cause anchor links to scroll to slightly different positions on mobile. The scroll-margin-top approach handles this better than JavaScript-based scroll offset. For mobile optimization, our guide to Squarespace mobile optimization covers responsive navigation and scroll behavior.

Anchor Links in Navigation Menu

Setting Up Navigation Anchor Links

To add anchor links to your navigation menu, go to the Pages panel and add a Link item (click plus icon > Link). Enter the anchor URL in the format /#section-slug for same-page links or /page-name#section-slug for cross-page links. The leading slash ensures the link works from any page on your site.

Navigation Anchor Links Not Working

If navigation anchor links do not scroll, check: the URL format includes the hash and slug, the target section slug exists, and the link does not accidentally open in a new tab (which would load a new page instead of scrolling). Also check for JavaScript in Code Injection that may prevent default link behavior.

One-Page Website Navigation

For one-page sites where all navigation should scroll to sections on the same page, use the format /#section-slug for every navigation link. Test each link - missing slugs or format errors break individual menu items without affecting others. For navigation setup, our guide to editing the navigation bar covers anchor link navigation structure.

AJAX Navigation and Anchor Links

The Issue

Squarespace uses AJAX page transitions - clicking a link updates page content without a full reload. When an anchor link points to a section on a different page (like /about#team), the AJAX transition loads the new page but may not scroll to the anchor because the scroll behavior does not always fire after AJAX navigation.

The Fix

For cross-page anchor links, use the full URL format: https://yourdomain.com/about#team. This forces a full page load (not AJAX) which reliably triggers the scroll to the anchor. Alternatively, add a small JavaScript in Code Injection that checks for a hash in the URL after AJAX navigation and scrolls to the target. For JavaScript on Squarespace, our guide to Squarespace custom scripts covers AJAX-compatible patterns.

Adding Smooth Scroll to Anchor Links

By default, anchor links cause an instant jump to the target section. For a smooth scrolling animation, add this CSS to Design > Custom CSS:

html { scroll-behavior: smooth; }

This enables smooth scrolling for all anchor links site-wide. The animation makes the navigation feel more polished and helps visitors understand they are moving within the same page rather than loading a new one.

Troubleshooting Process

1. Check the section slug. Does the target section have a URL slug assigned? Open section settings and verify.

2. Check the link format. Does the link use #slug-name (same page) or /page-name#slug-name (cross-page)? Is the hash present?

3. Check case sensitivity. Do the slug and link reference use the same capitalization? Use lowercase for both.

4. Check for header overlap. Does the fixed header cover the target section? Add scroll-margin-top CSS.

5. Test on mobile. Does the anchor work on a phone? Adjust the scroll offset for mobile header height.

6. Test cross-page links. Use the full URL format for anchor links that navigate to a different page. For design strategies, our Squarespace design tips guide covers navigation hierarchy. For SEO implications, our Squarespace SEO guide covers internal linking and page structure.

Get Your Anchor Links Working Perfectly

Anchor links on Squarespace are simple in concept - slug plus hash link - but the details matter. A missing slug, a wrong format, or a header overlap turns a working navigation system into a frustrating dead end.

Set your slugs, format your links correctly, add scroll offset CSS for the fixed header, enable smooth scrolling, and test on both desktop and mobile. Those five steps cover virtually every anchor link issue on Squarespace.