How to create smooth scroll anchor links in Squarespace

What are anchor links?

Anchor links are like magic buttons on a webpage. They let people quickly jump from one part of a page to another with just one click. These links are super handy, especially on pages with lots of text or when you want to highlight important stuff. They make your website easy to explore, giving visitors a smooth and cool experience while adding a nice touch to your site.

Create a anchor tag with a code block

• While in Edit Mode, head to the section you want visitors to jump to with a hyperlink.

• Place a Code Block at the beginning of that section.

• Copy and paste the code provided below.

• Replace "anchorlink" with your chosen name, like "about".

Code:

<a name="anchorlink"></a>

To create a hyperlink on the page:

• Insert a text block, button, or image at the preferred location.

• To determine the destination of the anchor link, use a "#" followed by the word you substituted for "anchorlink".
  Example: #anchorlink or #about

• For text links, ensure to click "Apply" after making the changes.

Enable smooth scroll

To achieve a graceful, smooth scrolling motion when clicking links, follow these steps:

Go to Design → Custom CSS in the main Squarespace menu.

Paste the provided code:

css:

html {  scroll-behavior: smooth; }

That's it! Your long-scrolling Landing Page will now have a header navigation that smoothly scrolls to the Contact section. Repeat these steps for other sections like Rates and Testimonials.

In summary we delved into the page source, identified the section we wanted, copied its unique ID, and linked to that section through the main navigation using a hashtag prefix.