Adding a Floating "Back to Top" Button

Index pages can be very long. This makes them really easy to view on tablets, but if the navigation isn't visible, it can make it difficult for visitors to return to the top of the page. Some Squarespace templates - like Marquee - have a 'back to top' button in the footer, but on longer pages, it's helpful to have a button that fades into view as you scroll down and floats along the bottom of the browser. Here's how to add one to your Squarespace site. This guide is for the Bedford template, including Anya, Bryant and Hayden which are all variants of Bedford. 

Note: These templates ship with the 'squarespace-ui-font' which this article relies on. Newer templates don't include this font as it has been replaced by an SVG. We will update this article shortly so that it works with newer templates.

Default button

Steps

Before we start, here's a quick summary of what you're going to do. There are four steps to add the back-to-top button to your site:

1. Add jQuery library. If your site already uses jQuery you can skip this step.

2. Add an anchor link for the user to click on

3. Add javascript to make the button functional. It needs to appear, disappear and make the page scroll to the top.

4. Add some CSS to set the colour, shape and location of the link.

Let's get started.

1. Adding the jQuery library

jQuery is a lightweight, "write less, do more", JavaScript library that makes it easier to write JavaScript on your website. To use it, you just need to add a reference to the jQuery library. Log on to your website and head to Settings > Advanced > Code Injection. In the HEADER section, add the following: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

JQuery is very popular, and if you've already added some code to your site, you may already be using it. If this line (or something very similar) is already there, you don't need to add it again.

Anyway, you've now completed the first step.

2. Adding an anchor link

The next step is to add the anchor link with some HTML. Navigate to the index page where you'd like the button to appear. This is usually the homepage, but you can add it to any page you like, regardless of whether it is an index or homepage. Open the Settings panel for this page; you can reach this by clicking the gear icon beside the page name in the PAGES menu or by clicking SETTINGS in the dark grey pop-up menu.

Click Advanced to view the advanced page of the settings panel. On this page you'll find the PAGE HEADER CODE INJECTION area. Paste the following HTML into this box:

<a href="#" class="sf-back-to-top"><span class="arrow"></span>Top</a>

This creates a "Top" link with a class of "sf-back-to-top". This unique class will be used to style and animate the link in the next few steps. Leave this window open so that we can add the jQuery.

If your site is not in English, you may prefer to replace the text "Top" with something else.

3. Adding the javascript

In the same window, add the following code just below the HTML you just added:

<script>
var amountScrolled = 300;

$(window).scroll(function() {
    if ( $(window).scrollTop() > amountScrolled ) {
        $('a.sf-back-to-top').fadeIn('slow');
    } else {
        $('a.sf-back-to-top').fadeOut('slow');
    }
});

$('a.sf-back-to-top').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 700);
    return false;
});
</script>

Save the changes.

The <script> tags are there to let Squarespace know that this is JavaScript and not HTML.

The next line determines when the button will appear. The higher the number, the further the visitor will have to scroll down the page before the button appears.

The next few lines are the code that makes the button appear using a slow fade effect. It also makes the button fade away when the visitor returns to the top of the page.

The final few lines make the page scroll to the top when the visitor clicks the button. Instead of jumping to the top of the page, a nice animation makes it scroll upwards.

Now that we've added the code, it's time to add some CSS to style the button. Until we've done this, you won't see the button.

4. Adding the CSS to style the button

The button is styled using CSS. You add this to Design > Custom CSS. Paste the following code into the box. If there's already some CSS in the box, add this below it.

/* Style the back-to-top floating button */
.sf-back-to-top {
    background-color: #50A1CB; /* button color */
    color: white; /* text/arrow color */ 
    display: none;
    z-index: 999;
    /* float in bottom right corner */
    /* 20 pixels from edge */
    position: fixed;
    right: 20px;
    bottom: 20px;
    /* size of button is 50 pixels*/
    width: 50px;
    height: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    /* round button */
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

a.sf-back-to-top {
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;    
}

a.sf-back-to-top .arrow:before {
    content: "\e02d";
    font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
}

Save the CSS before you go any further.

Finishing touches

That's all folks! Now that you've finished adding the code, you should be able to scroll down the page and see the button fade in. As you scroll up the page, it should fade out, like this: 

The 'Back to Top' button in action

The 'Back to Top' button in action

 

By default, the button is a 50-pixel diameter circle in light blue. It has an arrowhead character (borrowed from Squarespace's built-in UI font) and the word 'TOP' in uppercase. 

You can customise the look of the button by changing the colour values in the second and third lines of this code. I've used a light blue (hex 50A1CB) for the background and white for the arrow symbol and the text. If you're not familiar with colour codes, here's a link to the HTML Color Codes site to help you pick the colour that you want. 

If you know some CSS you can change any aspect of the button, for example making the arrow larger, replacing it with a graphic or changing the word top to another language. You can also adjust how close it appears to the bottom right (or top right) corner.

Found this article helpful? You can always buy us a coffee to say thank you!