How to Smooth Scroll to Sections With Squarespace

Website Design

Feb 29

This post may contain affiliate links. I may earn a commission at no extra cost to you if you make a purchase through them. Full disclosure here.

How to Smooth Scroll to Sections With Squarespace?

Squarespace makes it easy to create smooth scrolling anchor links that allow your website visitors to quickly jump between different sections of your pages.

This can greatly improve the user experience, especially on longer pages with multiple content areas. Here's how to set it up:

Quick Fix

Create Anchor Points

The first step is to create anchor points on the sections you want to link to. This tells Squarespace where the visitor should scroll to when the link is clicked.

In the Squarespace page editor, hover over the section you want to link to and click the + icon to add a new block.
Select the Code Block option.
In the code block, add the following HTML:

<div id="anchor-name"></div>

Replace anchor-name with a unique identifier for that section, like about or contact. This will be the name used in the link.

Repeat this process for each section you want to link to.

Create Smooth Scroll Links

Now that you have your anchor points set up, you can create the links that will smoothly scroll the visitor to those sections.

In your page's navigation, footer, or anywhere else you want to add a link, create a new link.
In the link editor, enter the following URL structure:

#anchor-name

This will apply a smooth scrolling animation to all links that start with the # symbol.

Customize the Scroll Behavior

You can further customize the smooth scrolling behavior by adjusting the scroll speed and offset. Add this CSS to your Squarespace site:


html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* Adjust this value to change the offset */
  }

The scroll-padding-top property sets the amount of space between the top of the viewport and the target section. This can be helpful if you have a fixed header that you don't want the section to scroll behind.

By following these steps, you can easily create smooth, seamless scrolling between sections on your Squarespace website, providing a more intuitive and enjoyable user experience.

How to Smooth Scroll to Sections With Squarespace