How to Smooth Scroll to Page Sections on Your Squarespace Website

10 Winery Website Design must-haves for your winery 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.

 
How to add an index blog page to your Squarespace website.
 
 

2) Name your index block and insert your sections below each other:

Name your index block and insert your sections below each other on Squarespace website.
 

3) Click the settings icon of the section you want to scroll to:

 
how to add anchor link to index page
 

4) The settings will pop up on the right. Take note of the section URL Slug.

 
How to add an index page with anchor links in Squarespace.
 
 

5) Insert your button within your content or add a main navigation link.

 
How to add a button to your content in Squarespace.
 
 

6) When adding the link URL, head to the External section, add a hashtag (#) followed by the URL Slug from Step 4.

How to add external link to index page for anchor jump on Squarespace.
 

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.

How to insert a code block on Squarespace website.
 

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.

<a name=”special”></a>

How to use code editor in Squarespace to create an anchor link.
 

3) Click apply and save the page content.

4) Insert your Button within your content or add a main navigation link.

 
How to add an anchor link with button and code in Squarespace
 
 

5) When adding the link URL, head to the External section, add a hashtag (#) followed by the URL Slug from Step 2.

How to add a code to a button for an anchor link in Squarespace
 

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.

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script><script type="text/javascript">$(function() {$('a[href*=#]:not([href=#])').click(function() {if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {var target = $(this.hash);target = target.length ? target : $('[name=' + this.hash.slice(1) +']');if (target.length) {$('html,body').animate({scrollTop: target.offset().top}, 1000);return false;}}});});</script>

 
how to Insert Code Injection in header for smooth scroll on your website for anchor links and anchor jumps.
 
 

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!

 
 

Ready for a modern & refined website to tell your brand’s story?

Are you ready to reach the next level of success?

Let’s make it happen!


Kat Collins is a Squarespace Website Designer focused on helping you share your brand’s story via your website to take your business to the next level. She specializes in winery website design, as well as small business website design. On the blog, you’ll find a variety of topics that help you succeed in online business, such as website design, branding, social media strategies, blogging, email marketing, Squarespace design tips, and more.