Last week we looked at how to add a collapsible side menu to your Squarespace website. Today, we’ll look at how to add a scroll down button to Squarespace.

This tutorial walks you through adding a scroll down indicator to any section of your Squarespace site. This small but useful feature encourages visitors to keep moving through your content. It works across desktop & mobile, integrates smoothly with your existing layout, and can be customized to match your Squarespace website’s design.

How to Add the Scroll Down Indicator Button to your Squarespace Website

1. Add a Code Block to your Section

Navigate to the page where you want to add the scroll-down indicator.

Navigate to the page where you want to add the scroll-down indicator.
Add a Code Block inside the desired section.
Paste the following HTML inside the block

<div class="scroll-down-section"></div>

2. Add the JavaScript

Paste the following JavaScript inside the Footer Code Injection box:

Go to Website >Pages > Website Tools > Code Injection
Add this script to the Footer Injection:

<script>
const scrollDownEl = '<div class="scroll-down-wrapper"><a class="scroll-down" href="#">'
    + '<svg class="arrow arrow-one" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">'
    + '<path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3 .1-17z"/></svg>'
    + '<svg class="arrow arrow-two" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">'
    + '<path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3 .1-17z"/></svg>'
    + '<svg class="arrow arrow-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">'
    + '<path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3 .1-17z"/></svg></a></div>';

function scrollDown() {
    if ($('.scroll-down-section').length === 0) return;
    const currSection = $('.scroll-down-section').parents('.page-section');
    currSection.append(scrollDownEl);
    currSection.addClass('has-scroll-down');

    $('.scroll-down').click(function () {
        let nextSectionTop = $(currSection).next().offset().top;
        $('html,body').animate({ scrollTop: nextSectionTop }, 'normal');
    });
};

$(window).on('load', scrollDown);
</script>

3. Add the CSS:

Go to Website >Pages > Website Tools > Custom CSS
Paste the following code:

.page-section.has-scroll-down .content-wrapper {
    padding-bottom: 130px !important;
}

.scroll-down-wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%);
    z-index: 99999;
}

.scroll-down {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    padding: 20px 10px;
    border-radius: 20px;
    transition: .3s background-color ease-in-out;
}

.arrow {
    position: relative;
    margin: auto;
    margin-top: -3px;
    width: 12px;
    fill: #fff;
    transition: .3s fill ease-in-out;
}

.scroll-down:hover {
    background-color: #fff;
}

.scroll-down:hover .arrow {
    fill: #13294b;
}

.arrow-one {
    animation: 3s arrow-one-scale ease-in-out infinite,
               3s pulse ease-in-out infinite;
}

.arrow-two {
    animation: 3s arrow-two-scale .2s ease-in-out infinite,
               3s pulse .4s ease-in-out infinite;
}

.arrow-three {
    animation: 3s arrow-three-scale .4s ease-in-out infinite,
               3s pulse .8s ease-in-out infinite;
}

@keyframes arrow-one-scale {
    from { transform: translateY(-10px) scale(.4); }
    to { transform: translateY(0px) scale(.8); }
}

@keyframes arrow-two-scale {
    from { transform: translateY(-5px) scale(.6); }
    to { transform: translateY(5px) scale(1); }
}

@keyframes arrow-three-scale {
    from { transform: translateY(0px) scale(.8); }
    to { transform: translateY(10px) scale(1.2); }
}

@keyframes pulse {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

Customize the Code

You can modify the scroll down indicator to better fit your Squarespace design by adjusting the following properties:

Positioning
Increase bottom: 30px; to move the button higher.
Decrease bottom: 30px; to position it closer to the bottom.
Change left: 50%; to another percentage (left: 40%; or left: 60%;) to shift it left or right.
Colors
To change the button’s default and hover colors, modify these values in the CSS:
.scroll-down { border: 2px solid #fff; /* Border color */ background-color: transparent; /* Default background */ }
.scroll-down:hover { background-color: #fff; /* Background when hovered */ }
.scroll-down:hover .arrow { fill: #13294b; /* Arrow color when hovered */ }
Icon Size
To make the arrow icons bigger or smaller, edit this value:
.arrow { width: 12px; /* Default Icon size */ }
For example:

Increase width: 12px; to width: 20px; for a larger icon.
Decrease width: 12px; to width: 8px; for a smaller icon.

Why Add a Scroll Down Indicator?

Squarespace sites are known for their gorgeous minimal designs. But sometimes that minimalism means users don’t realize there’s more content waiting just below the fold.

A scroll down indicator:

Provides a visual cue that more content exists
Encourages deeper engagement
Makes your layout feel interactive
Looks super sleek when styled right

Whether you’re a Squarespace designer building sites for clients or you're DIY-ing your own portfolio or small biz site, this small feature can have a surprisingly big impact.

Where to Use a Scroll Cue on Your Squarespace Site

Here are a few spots where a scroll indicator really shines:

On a full-screen hero or landing section
Above the fold on a portfolio page
On event or announcement pages
On product launch pages or sales funnels

Basically, anywhere that starts with a bold intro and needs a little nudge to get people scrolling.

Need help implementing this code on your website?

Looking for a custom Squarespace solution or need assistance tweaking this code? Minimist specializes in modern web design and Squarespace coding to fit your needs. Whether it’s styling adjustments, added functionality, or a fully custom site, I can help.

Book a Free Consultation

Articles