Create smooth same-page links in Squarespace without code using section IDs

You can link to any section on the page — perfect for buttons, navigation links, “scroll to next section” buttons, pricing sections, contact forms, and more.

1. Create a section and set the ID

Open the section settings and go to:
Edit Section → Design → Anchor Link

Add your section ID there. You’ll use this ID in the link later.

Learn more about adding section IDs in Squarespace

For this example, we’ll use #next-section, but it’s better to use meaningful names like #pricing, #about-us, or #contact.

2. Create the link

Next, create a link that scrolls to the section. This can be a button, text link, image, or even a navigation link.

Use the section ID with a hash (#) in the link field, like this:

#next-section

Also make sure “Open link in new tab” is disabled.

3. Adjusting the spacing

In most cases, you don’t need to adjust anything because Squarespace adds spacing for the fixed header.

If the section scrolls too high or too low, you can manually adjust the spacing with CSS:

#next-section {
  scroll-margin-top: 40px; /* space from the top of the screen */
}