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.

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