Building a “Keep Scrolling” Arrow

Monday, February 20, 2023
12:00 AM 1:00 AM

Google Calendar ICS

5 Lessons | 30 minutes

Scrollin’ Along: Adding a “keep scrolling” arrow to your webpage

Add a little down arrow icon to indicate to your visitors to keep scrolling. They’ll automatically be scrolled down to the next section when they click on it.

Featured

Initial Setup & Planning

Learn the basic installation for this code and the overview of this series.

Designing Your Icon

The basics of using custom icons in Squarespace and my preferred icon library.

Positioning Your Icon

Learn to place the icon wherever you want within your page section without being limited by the Fluid Engine grid.

Adding the Click Event

Learn to turn the arrow icon into a clickable button that scrolls the user down to the top of the next section.

Make It Repeatable

We’ll wrap up this series by turning this into a function that we only need to add once, but can use it on as many pages as we want.

Building a “Keep Scrolling” Arrow

Scrollin’ Along: Adding a “keep scrolling” arrow to your webpage

Peek-a-Boo! Building A Show / Hide Section Toggle

50 Shades of Gray-dient: Building Background Gradients in Squarespace

Sharpen your skills. Get better in Squarespace.

Sharpen your skills.
Get better in Squarespace.