How to Smooth Scroll to Page Sections on Your Squarespace Website
Have you ever clicked on a button on a website page and suddenly it smoothly scrolled down on the same page to the informational section related to what you clicked on? Pretty cool feature!
The official name for it is creating anchor links. Anchor links ("page jumps") are special URLs that take you to specific places on a page. This means that when a website visitor arrives, they click a button or navigation link and it takes them, gracefully, to the information they are after in the long-scrolling page.
It’s a common feature and adds a nice slickness to your website. There are two methods that you can use.
METHOD ONE: INSERT AN INDEX BLOCK
This first method will work with any Squarespace template that uses Index blocks such as the Brine family. Using this method doesn’t require any coding.
1) Insert an Index Block.
2) Name your index block and insert your sections below each other:
3) Click the settings icon of the section you want to scroll to:
4) The settings will pop up on the right. Take note of the section URL Slug.
5) Insert your button within your content or add a main navigation link.
6) When adding the link URL, head to the External section, add a hashtag (#) followed by the URL Slug from Step 4.
7) Click Save and now your button or link will Smooth Scroll to your section!
METHOD TWO: ADD AN ANCHOR LINK VIA CODE SNIPPET
Say you want to simply add a single link to an existing Squarespace template that smooth scrolls to a section, we need to use Anchor Links as I mentioned above. Anchor links require some light coding to achieve the effect we want.
1) Just above the section you want to scroll to, open up the content editor and insert a Code Block.
2) You are now prompted with a code editor. Paste in the following code, editing “special” to whatever you want to call it, but remember the name. This is your Anchor Link.
3) Click apply and save the page content.
4) Insert your Button within your content or add a main navigation link.
5) When adding the link URL, head to the External section, add a hashtag (#) followed by the URL Slug from Step 2.
6) Click Save and now your button or link will jump to your section. But it doesn’t smooth scroll yet!
HOW TO ADD SMOOTH SCROLL
1) Go to Squarespace’s Main Menu > Settings > Advanced > Code Injection. Copy and paste the following code in the Header block section.
2) Click Save and your smooth scroll now works. Go to your page and test it out!
If you want to see it in action, visit my Let’s Work Together Page here and click the “Get Quote Now” button. It will smooth scroll down to my contact form.
Pretty sweet, huh?
Did you use either of these codes on your website? How did it work for you? I’d love to know in the comments below!