How to Make Your Anchor Links Scroll Smoothly on Squarespace 7.1
Why Add Smooth Scrolling to Your Squarespace Anchor Links?
When a visitor clicks an anchor link, it jumps instantly to the linked section. While this works, it can feel abrupt and jarring.
By adding smooth scrolling, the page glides seamlessly to the anchor destination, creating a polished and professional browsing experience.
Benefits of Smooth Scrolling Anchor Links
✅ Improves User Experience – Visitors can follow the flow of your content more naturally.
✅ Enhances Website Aesthetics – A sleek scrolling effect makes your site feel high-end and well-designed.
✅ Keeps Visitors Engaged – Prevents users from getting disoriented when jumping between sections.
✅ Quick & Easy to Implement – Requires just a small CSS snippet to activate.
How to Enable Smooth Scrolling for Anchor Links in Squarespace
This method works for Squarespace 7.1 and takes less than 2 minutes to implement.
Step 1: Add the CSS Code
Log in to your Squarespace account.
Navigate to Website → Design → Custom CSS.
Copy and paste the following CSS code into the Custom CSS box, and then click Save to apply the changes.
// Anchor Smooth Scroll
html {
scroll-behavior: smooth;
}Step 2: Add an Anchor Link to Your Page
Now that smooth scrolling is enabled, let’s create an anchor link on your Squarespace site.
Method 1: Using an ID Attribute in a Text Block
Go to Pages and select the page where you want to add the anchor link.
Insert a Text Block and type the anchor text (e.g., “Scroll to Contact”) and then click Apply.
#contact
Method 2: Adding an Anchor to a Button
Add a Button Block to your page.
In the link field, enter the anchor ID, like below, then save and test your button to ensure it scrolls smoothly to the linked section.
#services
Troubleshooting Common Issues
If your smooth scrolling isn’t working, here’s what to check:
🔹 Make sure your anchor link matches the section ID exactly. For example, #services won’t work if the section ID is #ourservices.
🔹 Check for conflicting CSS. Some Squarespace templates may have default settings that interfere with smooth scrolling. Try removing other scroll-related CSS rules.
🔹 Test in an Incognito Window. Sometimes, cached styles can prevent new CSS from taking effect.
🔹 Use a Full URL if Linking from a Different Page. If you’re linking to an anchor on another page, use the full URL, like this:
www.yourwebsite.com/about#team
Want More Website Tips?
Join our Passport Club Email List and get access to:
Need Help Customizing Your Squarespace Website?
We offer professional Squarespace design services to help small business owners build beautiful, functional websites.
💻 Custom Squarespace Website Design
🎨 Custom Branding Design
🖼️ Monthly Graphic Design Support Services
🔧 Monthly Squarespace Website Support Services
Other Blog Articles You May Like
The Step-by-Step Process of Working with a Web Designer (So You Know What to Expect) – Learn what to expect when collaborating with a web designer, from planning to launch.
How a Custom Website Helps You Charge More & Attract Higher-Paying Clients – Discover how investing in a custom website can boost your business and attract high-quality clients.
How to Improve Your Squarespace Website’s User Experience (And Keep Visitors Engaged Longer) – Tips and strategies to enhance your Squarespace website’s user experience for greater engagement.
What Makes a High-Converting Squarespace Website? 7 Features You Can’t Ignore – Explore the essential features your Squarespace website must have to convert visitors into clients.
How to Create a Website That Actually Converts Visitors into Clients – Practical advice on designing a website that encourages visitors to take the next step toward becoming clients.
Why a Custom Squarespace Website is a Game-Changer for Scaling Your Business – Find out how a custom Squarespace website can help you scale and streamline your business.
How Consistent Branding Can Elevate Your Holistic Practice – Explore the importance of maintaining brand consistency across all channels and how it builds trust with your audience.
How Regular Updates on your Squarespace Website Can Boost Client Engagement - Keep Clients Engaged with Fresh Content – Learn how to use Squarespace’s features to keep your website up to date and engaging for your audience.
Why Your Wellness Practice Needs a Custom Logo (And How It Impacts Your Brand) – Understand how a tailored logo design can strengthen your brand identity and appeal to your target audience.
5 Must-Have Website Features for Wellness Coaches and Practitioners – Essential website features wellness professionals need, like online booking, client testimonials, and product/service listings, and how custom Squarespace design can integrate these elements seamlessly.
Explore More Blogs from The Growth Passport
