Squarespace How to Link to Section

How Anchor Links Work in Squarespace

An anchor link consists of two parts: the anchor (a unique ID assigned to a section) and the link (a URL that includes a hash symbol followed by that ID). When you create a link like #services, the browser looks for a section on the current page with the ID "services" and scrolls to it. If you use a full URL like https://yoursite.com/page#services, the browser loads that page and then scrolls to the section.

Squarespace sections in version 7.1 each have a built-in field where you can set a custom URL slug. This slug becomes the anchor ID. In version 7.0, the process works similarly but the setting location differs slightly depending on your template. Both versions support the same hash-link navigation.

How to Link to a Section in Squarespace: Step by Step

Step 1: Add an Anchor Slug to the Target Section

Open the page editor and hover over the section you want to link to. Click the pencil icon or the section settings gear to open the section options. Look for a field labeled "URL Slug" or "Section ID" - this is where you enter your anchor name. Type a short, descriptive slug using lowercase letters and hyphens (for example, about-us, services, or contact). Click Save or Apply.

Choose slugs that are easy to remember and clearly describe the section content. Avoid spaces, special characters, or long strings. The slug you enter here is what you will reference in your links.

Step 2: Create the Link to That Section

Navigate to where you want to place the link - this could be a text block, a button, or a navigation menu item. Select the text or element, click the link icon in the toolbar, and enter the anchor reference. For a same-page link, type a hash symbol followed by the slug: #services. For a link from a different page, use the full URL: https://yoursite.com/page-name#services.

Click Apply to save the link. Preview the page and click the link to confirm it scrolls to the correct section.

Step 3: Add Anchor Links to Your Navigation Menu

You can also add anchor links to your main site navigation. Go to Pages in your Squarespace dashboard, click the plus icon to add a new navigation item, and select Link. In the URL field, enter the full anchor URL: /page-name#section-slug. Give it a display name and save. This is especially useful for one-page websites where the entire navigation should scroll to different sections rather than loading new pages.

Using Anchor Links on One-Page Squarespace Websites

One-page websites rely entirely on anchor links for navigation. Instead of separate pages, you build one long page with multiple sections, each with its own anchor slug. Your navigation menu links to each section using hash URLs. When a visitor clicks "Services" in the menu, the page scrolls smoothly to the services section.

To set this up, create all your sections on a single page, assign anchor slugs to each one, and build your navigation using link items that point to /#about, /#services, /#portfolio, and /#contact. The forward slash before the hash ensures the links work from any page on your site. For design strategies that work well with one-page layouts, our Squarespace design tips guide covers section layout and visual hierarchy.

Adding Smooth Scroll to Anchor Links in Squarespace

By default, clicking an anchor link in Squarespace causes the page to jump instantly to the target section. If you want a smooth scrolling animation instead, you can add a small CSS rule to your site. Go to Design > Custom CSS and add:

html { scroll-behavior: smooth; }

This single line enables smooth scrolling for all anchor links across your entire site. The animation is subtle and makes the navigation feel more polished. For more custom CSS techniques, our guide to adding custom CSS to Squarespace covers the full workflow.

Common Anchor Link Issues in Squarespace and How to Fix Them

Anchor Link Scrolls to the Wrong Position

If your anchor link scrolls slightly past or above the target section, the most common cause is a fixed navigation header that overlaps the section. The browser scrolls to the exact top of the section, but the fixed header covers part of it. To fix this, add a CSS offset using scroll-margin-top on your sections - a value of 80 to 100 pixels usually compensates for the header height.

Anchor Link Does Not Work at All

Check that the slug you entered in the section settings matches exactly what you typed in the link. Anchors are case-sensitive in some browsers - use lowercase consistently. Also confirm that the section actually has a slug assigned. If you are linking from a different page, make sure you are using the full URL path, not just the hash.

Anchor Link Works on Desktop but Not Mobile

Mobile browsers sometimes handle fixed headers differently, which can cause the same offset issue described above. Test your anchor links on an actual mobile device (not just the Squarespace mobile preview) to confirm they scroll to the right position. Adjust the scroll-margin-top value if needed. For broader mobile optimization, our Squarespace customization guide covers responsive design strategies.

Best Practices for Squarespace Anchor Links

Use descriptive slug names. Slugs like services, pricing, and testimonials are clear and easy to remember. Avoid generic names like section1 or block-a.

Keep slugs short and consistent. Use the same naming convention across your site - lowercase, hyphens between words, no special characters.

Test every anchor link after publishing. Preview mode does not always reflect how anchor links behave on the live site. Open the published page in an incognito window and click every anchor link to verify it scrolls correctly.

Add anchor links to your sitemap strategy. If you have a long page with important sections, anchor links give search engines additional context about your content structure. For more on how page structure affects SEO, our Squarespace SEO guide covers internal linking and content hierarchy.

Start Linking to Sections on Your Squarespace Site

Anchor links are one of the simplest improvements you can make to your Squarespace site's navigation. They let visitors jump directly to the content they want, reduce unnecessary scrolling, and make long pages feel organized and intentional. Whether you are building a one-page site or adding jump links to a detailed FAQ page, the setup takes just a few minutes.

Assign slugs to your key sections, create the links, add smooth scrolling if you want a polished feel, and test everything on desktop and mobile. Your visitors will notice the difference immediately.