How To Make your Squarespace Website scroll smoothly
Smooth Scroll Magic: Enhance Anchor Link Navigation in Squarespace
So you’ve added anchor links to your website, but it’s a bit jarring when a user clicks your link and it’s just BOOM! Right to your anchor.
It’s not a smooth experience. The jump to your anchor is immediate and a bit jarring.
If only there was a way to make it smoothly and quickly scroll to the anchor… so that the experience wasn’t so jarring for the user…
Well there is!
It’s a simple CSS tweak.
Squarespace doesn’t have a built-in way to accomplish this, but with a tiny bit of code, it’s easily done.
This tutorial has been tested on Squarespace 7.1 but should also apply to legacy sites built on version 7. Also since this code does not use JavaScript, it should also work on any Squarespace plan.
VIEW OTHER POSTS IN THIS SERIES.
Prefer to DIY, but need a leg-up?
A Squarespace template can get you most of the way there. All you need to do is add your content, and make your design tweaks. And you’re pretty much ready to launch! And our template shop is growing.
The Code
This one is easy. Just copy the code below, open your Custom CSS panel, and paste it in exactly as it is.
// Make the scroll behavior smooth
html {
scroll-behavior: smooth !important;
}
What’s happening here? This code simply taps into the global html element and adds the property “scroll-behavior: smooth” to the document. The “!important” tag is, well, important too. That overrides the default Squarespace behavior. Normally we don’t want to do that if we don’t have to. But in this case it’s necessary, so go ahead.
And that’s it! Once you add this code, save the CSS, and reload your page, it should scroll nice and smooth to the anchor point from the anchor link.
Enjoy!
WAS THIS HELPFUL?
Do you think this tweak is dumb? Or did it save you a bunch of stress? Any other anchor link tweaks you have to share? Just leave a comment at the bottom of the page! 👇
👨💻
Hey you! Want more tips?
Use the form below to sign-up for tips on Squarespace, web design, church tech, and other nerdy stuff from the Network!
Hi, 👋 I’m Daniel, the Lead Designer here at DAN. I specialize in helping small businesses and nonprofits get great looking websites that can turn site visitors into advocates!
Ready to launch your website? Let’s do it in one day.
Affordable website design for Small Businesses and Nonprofits.
Next Level DIY
When building a website yourself is harder than you thought.
So why not skip the design headache, and just focus on your content. Our Squarespace templates are designed to take your website to the next level.
Elevate user experience on your Squarespace site by implementing smooth scroll behavior for anchor links. Learn how to effortlessly add this CSS tweak to create a seamless transition when users navigate to anchored sections of your website. Follow this simple tutorial for a smoother and more engaging browsing experience.