Squarespace Back To Top Button [tutorial + free plugin inside]

Squarespace Back To Top Button [tutorial + free plugin inside]

Most likely you have seen "Back To Top" button more than once. This is a button that appears in the lower right corner when you start to scroll down. And if you click on it, then it automatically scrolls you to the very top.

 
Blog & Insta post mockup – 4.png
 

Some Squarespace templates have built-in “Back to Top” button, but, in most cases it only visible on mobile devices in the footer menu.

 

If your Squarespace website has really long pages or even this is a one-page website, then this button will simplify life most of your visitors.

 

Note: You'll need a Business plan or higher in order to inject this code onto your site.

 

I tried to make it as simple as possible for you.

 

The code will consist of three parts — HTML, CSS, and jQuery. Don't be afraid if you don't understand these words, just follow the instruction below the desired button will appear on your site within the next 10 minutes :)

 

Step 1: Add the CSS code

1.    Open your Squarespace Admin panel → Design → Custom CSS and insert snippet that I left below. You can customize colors by your choice!  

/*  Change here the background color to follow your brand style!  */
@my-background-color: #333;

/*  Change here the hovering background color!  */
@hover-background-color: #dedede;

/* Change here the arrow color */
@arrow-color: #fff;

#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background-color: @my-background-color;
    color: @arrow-color;
    font-family: 'Roboto' !important;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: @hover-background-color;
}
#back-to-top.show {
    opacity: 1;
}


Step 2: Add HTML 

Go to Settings → Advanced → Code Injection → Header.

<a href="#" id="back-to-top" title="Back to top">&uarr;</a>

This code will enable back to top button on each page of your website.

If you want to add back to top button to specific page go to Pages → Open Settings of the page where you want to add Back to Top button → “Advanced” tab → Insert the code into “Page Header Code Injection” window.

 

Step: 3 Add jQuery code

The following jQuery tracks the page scroll and appears the button if the page is scrolled down. As per the below code, if the page is scrolled down greater than 100 pixels, the button will display, otherwise, the button will be hidden.


Go to Settings → Advanced → Code Injection → Footer

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function() {
if ($('#back-to-top').length) {
    var scrollTrigger = 100, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#back-to-top').addClass('show');
            } else {
                $('#back-to-top').removeClass('show');
            }
        };

    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#back-to-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}
})

</script>

Do you have questions? Leave a comment below and I'll help you out.