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.
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! 👇
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.