How to Add Smooth Scroll Anchor Links to Your Squarespace Site

The Importance of Smooth Scroll Anchor Links in Squarespace

Why Smooth Scrolling Enhances User Experience

Smooth scrolling improves navigation by creating a fluid transition between sections. This reduces abrupt jumps that disrupt user flow. Websites with long pages, such as landing pages or one-page portfolios, benefit from a seamless scrolling experience.

Why Squarespace Doesn’t Offer Native Smooth Scrolling

Squarespace allows anchor links but lacks built-in smooth scrolling. By default, clicking an anchor link results in an instant jump. Adding custom CSS or JavaScript enables smooth transitions, improving user engagement and navigation.

Common Use Cases for Smooth Scrolling

1. One-page websites – Smooth transitions create a polished experience.

2. FAQs and help pages – Users can navigate answers effortlessly.

3. Table of Contents (TOCs) – Enhances readability by linking to sections.

4. Portfolio and service pages – Helps showcase information interactively.

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.

---

FAQ: Smooth Scroll Anchor Links in Squarespace

1. How to Use Anchor Links in Squarespace

You typically see anchor links at the top of the page (such as table of contents links), and when clicked on they typically bring you down to that specific section.

2. How can I use anchor links to perform scroll smoothly?

Inserting anchor links will not give you smooth scrolling on your site.

3. How do I come up with the generated CSS or JavaScript?

Go to Design — > Custom CSS to insert CSS; or add JavaScript at Settings — > Advanced — > Code Injection — > Footer.

4. Are anchor links functional on mobile?

Yes, but test them to be sure they work as they should, particularly in expandable sections or with sticky headers.