How to Smooth Scroll to sections with Squarespace 7.1

Published by Rob Hope in Sponsored Articles on 15 Jun 2020

Did you know I’ve curated over 2,000 One Pagers on One Page Love featuring smooth scroll!

Smooth scroll is such a popular feature within the One Page website niche as it creates a more pleasurable reading experience. A visitor arrives, they click a link and it transports them, gracefully, to the information they are after within the same webpage.

In this new tutorial (plus video) I show you exactly how to achieve smooth scroll using the new Squarespace 7.1 platform. There are essentially two methods – both not requiring any coding experience – let’s begin!

How to Smooth Scroll to sections with Squarespace


One Page Love Exclusive Coupon

OPL10

Yay! Squarespace has been kind enough to give One Page Love readers the exclusive coupon OPL10 for 10% Off your first website or domain purchase. (There is a free 14-day trial with no credit card needed, so you can try risk free.)


 

Tutorial Breakdown


Smooth scroll demo: the desired outcome

For tutorial context we are adding smooth scroll to a Landing Page for a New Orleans dog walker, Sarah Young. Note how clicking the header navigation smooth scrolls to the page sections:

 

Smooth Scroll demo

 

In both methods we are going to link to the footer contact area from the header navigation Contact button.


Before we begin: Which version of Squarespace do you have?

Squarespace 7.1 has a more streamlined setup process for styling your site and adding content. There is no need to start with a specific template. If you are wondering if your website is on Squarespace 7.0 or 7.1 – simply identify where the demo expansion arrow is. Left is Squarespace 7.0, right is Squarespace 7.1:

If you are using Squarespace 7.0 please refer to the older tutorial: How to Smooth Scroll to Index Blocks using Squarespace.

There are two methods to achieve smooth scroll using Squarespace 7.1, let’s continue:


Method A: Insert code blocks with anchor links

Method A has 3 steps:

  1. Insert code block with anchor link
  2. Link to the anchor link from a main navigation link
  3. Enable Smooth Scroll

What is an Anchor link?

Think of anchors as positions within our long-scrolling webpage. Anchors are assigned a name like ‘contact’. We can navigation to these anchor positions by linking to the anchor name with a hashtag (#) prefix. Example #contact

So the link pointing to the contact anchor position would look like this:

#contact

and the actual anchor position code would look like this:

<a name="contact"></a>

To add an anchor link, we need that tiny bit of custom code above the relevant section, it’s real easy.

Step 1: Insert code block with anchor link

When editing the page, hover your tear drop cursor above the section to kick off the content block option panel. Select the Code block and proceed to paste in an anchor link like this:

<a name="contact"></a>

Then hit the Apply button.

Insert Code block with Anchor link

 

Step 2: Link to the anchor link from a main navigation link

Open up your header navigation links (or any link within your page) and link to the anchor we created using a # prefix, example:

#contact

Link to the anchor link

Step 3: Enable Smooth Scroll

Finally to enable that graceful smooth scroll motion when clicking links, head over to Design โ†’ Custom CSS in the main Squarespace menu and paste in the following code:

html {
scroll-behavior: smooth;
}

… and that’s it! Our long-scrolling Landing Page now features a header navigation that smooth scrolls to our Contact section. You would repeat the steps for other sections on your Landing Page like Rates and Testimonials.

To recap method A, we inserted an anchor link just above the section we wanted to scroll to. We inserted the anchor link via a code block. Then we linked to that anchor link via a main navigation link.


Method B: Link to page section IDs

Method B has 4 steps:

  1. View page source code
  2. Find and copy the ID of required page section
  3. Link to the page section ID from a main navigation link
  4. Enable smooth scroll

Step 1: View page source code

Open up your Landing Page, right-click anywhere and select View Page Source out the menu options:

View Source Code

 

This will open up the scary looking source code of the webpage. Don’t panic, we are going to break it down.

Step 2: Find and copy the ID of required page section

For this example we want to smooth scroll to the Contact section so we need to find a section with contact detail content.

Open up the webpage search tool (Command + F) and paste in the following code snippet:
id="page-section

The result should suggest as many sections you have implemented in your Landing Page. In this example 5.

Switch between findings (ie. sections) using the arrows. As the Contact section is the last in the webpage, this should be the last reference with the search results. So I skip to the 5th result.

To ensure we are in the right section of the page, note how there is text related to contact in the demo below.

Copy the full code within the id=”XXX” like this:

page-section-5ec5004285641b15eddb5a81

Link to the anchor link

Step 3: Link to the page section ID from a main navigation link

Open up your header links (or any link within your page) and link to the section ID we copied from step 2 but using a # prefix, example:

#page-section-5ec5004285641b15eddb5a81

Link to the anchor link

Step 4: Enable Smooth Scroll

Finally to enable that graceful smooth scroll motion when clicking links, head over to Design โ†’ Custom CSS in the main Squarespace menu and paste in the following code:

html {
scroll-behavior: smooth;
}

… and that’s it! Our long-scrolling Landing Page now features a header navigation that smooth scrolls to our Contact section. You would repeat the steps for other sections on your Landing Page like Rates and Testimonials.

To recap method B, we dived into the page source and found the section we needed. We copied that sections unique ID. Then we linked to that section via a main navigation link using a hashtag prefix.


FAQ: What are the benefits of using Squarespace?

Squarespace is a leading online website builder. What sets them apart from the rest is their superior level of design and customer support. They have a huge support team and are available 24/7. Other main benefits are:

  • No Website Hosting Needed - their platform is fast and secure
  • Online Content Management - all edits are done within your browser, no software needed
  • Easily Drag and Drop Images - unlimited galleries with unlimited bandwidth
  • Free Domain Name - when registering for your first website, if you pay annually (renews at standard rate)
  • Beautifully Responsive - all templates work for all devices, so you only have to design your website once. Test and preview how your website will appear on a range of screen sizes.
  • Blog Sections - can easily be added to start sharing your journey
  • Commerce Solutions - are an upgrade away if you want to start selling products
  • Email Marketing - gather email addresses, send marketing emails and analyze the reader email activity

That’s a wrap! Don’t forget your 10% Off coupon: OPL10

OPL10

I hope you enjoyed this tutorial on how to Smooth Scroll using the new Squarespace 7.1 platform. Props to Squarespace for creating a platform where we can create beautiful Ecommerce websites, easily. In case you missed it last month, I wrote a tutorial how to build a long-scrolling Landing Page from scratch using Squarespace.

Much love,
Rob

Twitter: @robhope
LinkedIn: @robhope
Email: [email protected]