Website Building » Squarespace » How Do I Add a Scroll Down Arrow in Squarespace?

How Do I Add a Scroll Down Arrow in Squarespace?

Last updated on December 23, 2022 @ 6:09 am

Most website builders, including Squarespace, do not automatically add a scroll down arrow. This is because most templates are designed to be scrolled through vertically on desktop devices and horizontally on mobile devices. However, you can easily add a scroll down arrow to your Squarespace website using HTML code.

To add a scroll down arrow in Squarespace:

    1. In the Home Menu, click Pages.
    2. Hover over the page you want to edit and click the gear icon.
    3. In the Page Settings panel, click Advanced.
    4. Under Page Header Code Injection, enter the following code:

    <script>
    var scrolldown = document.getElementById('scrolldown');
    scrolldown.onclick = function() {
    window.scrollBy(0, document.body.scrollHeight);
    };
    </script>
    <style>
    #scrolldown {
    display: block;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    background-image: url("https://s3.amazonaws.com/static.Squarespace.com/generic/transparent-gifs/arrow-down-transparent-background-5.gif");
    }
    </style>

    5. Click Save to save your changes.

PRO TIP: Adding a scroll down arrow in Squarespace can be tricky and may not work as intended. Be sure to test your site after adding the arrow to see if it works as expected.
Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.