Link to Specific Page Sections in Squarespace with Smooth-Scrolling Anchor Links

Are you looking to add some pizzazz to your Squarespace website, especially if it's a single-page masterpiece? Anchor links are your answer! They'll effortlessly guide your visitors to specific sections of your page, eliminating the need for endless scrolling.

Anchor links are similar to regular links, but they have a superpower – they whisk you to a particular part of a page, not just to the top. And guess what? You can implement them seamlessly with Squarespace.

Let's get started by creating an anchor link for your Squarespace website:

1. Insert a Code Block: In the section you want to link to, add a new 'Code' block at the top. This will serve as the destination where the page will scroll to.

2. Customize the Code: Update the code to look like this (replace "section-name" with your preferred name, no spaces):

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

Now, let's integrate this anchor link into your Squarespace website's navigation:

1. Navigate to Pages: Open the 'Pages' panel.

2. Create a New Link: Scroll to the bottom of the list and select 'Link.'

3. Define the Navigation Label: Add the navigation title for your link. This is what users will see in the navigation.

4. Set the Link: Update the link to be the page URL followed by #section-name. For instance: /services#section-name or, if you only have a homepage, simply /#section-name.

With that done, save your changes and click the link – it should now smoothly scroll to the desired area. Yay!

But hold on, it might still snap abruptly to the section, which can be a bit jarring. Let's make it elegant with some CSS magic:

1. Access Custom CSS: Head over to the custom CSS section on Squarespace.

2. Add Smooth Scrolling: Paste the following code:

html { scroll-behavior: smooth; }

And just like that, you've transformed your Squarespace website with smooth-scrolling anchor links. If you encounter any issues, feel free to reach out. Happy scrolling!