Adding a Floating "Back to Top" Button

Adding a Floating "Back to Top" Button

Squarespace index pages can be very long. They look great on tablets, but if your site’s navigation isn't visible, it can make it difficult for visitors to return to the navigation at top of the page. Some Squarespace templates have a fixed navigation bar that ‘sticks’ to the top of the screen when visitors scroll down and some have a 'back to top' button in the footer, but some templates don't have either. We have found that visitors find it 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 was originally built and tested for the Bedford-family of templates, but we’ve recently adapted it to work with the Brine-family of templates. It’s Ajax compatible too, which means you can use it with all the new Brine-family features. Both template families ship with the 'squarespace-ui-font' which this article relies on. Some templates don't include this font.

The code in this article is provided for you to use on your own website, free of charge. If you'd prefer us to add it for you, or you'd like us to customise it we can do this for a small charge. Get in touch for more details.

 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. How will you know? Well, Squarespace templates don’t include it, so if you didn’t add a line that mentions ‘jquery’ then your site isn’t using it.

2. Add an anchor link for the user to click on. In a step 4, we’ll style this to look like a blue circle, but you can change the colour.

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: 

<!--- jQuery required for Back-to-Top plugin --->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

I’ve included some comments in the first line. These aren’t necessary, but it’s a good idea to include them because in a year you may not remember why you added the code.

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.

If you’ve saved the code, that’s the first step complete.

2. Adding an anchor link (Bedford)

The next step is to add the ‘back to top’ link that visitors will see. This is a simple line of HTML, plus some optional comments.

If you are using a Bedford-family template (or any Squarespace template that doesn’t use Ajax) and you want the back-to-top link to appear on every page of your website, you can install this in the same place as in step 1 (Settings > Advanced > Code Injection > Header).

If you only want the button to appear on certain pages, you’ll need to install it in a different location, once for each page. Navigate to the Settings panel for the relevant 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.

If you are using a Brine-family template, add the code to the same place as step 1. Don’t add it to individual pages, as code on individual pages does not load when Ajax is used.

Paste the following HTML:

<!-- Start of Back-to-Top link -->
<a href="#" class="sf-back-to-top"><span class="arrow"></span>Top</a>
<!-- End of Back-to-Top link -->

This creates a link with the title “Top” and a class of "sf-back-to-top". This unique class will be used to style and animate the link in the next few steps. If your site is not in English, you may prefer to replace the text "Top" with something else.

Leave this window open so that we can add the jQuery.

3. Adding the JavaScript

If you are using a Bedford-family template (Bedford, Anya, Bryant or Hayden) or one of the older templates then add the following code just below the HTML you just added in step 2 and save the changes.

<!-- Start of Back-to-Top script for Squarespace -->
<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>
<!-- End of Back-to-Top script for Squarespace -->

If you are using a Brine-family template (there are too many to list) or one of the newer Ajax-enabled templates then add the following code instead.

<!-- Start of Back-to-Top script plugin for Squarespace -->
<script>
window.Squarespace.onInitialize(Y, function(){  
  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>
<!-- End of Back-to-Top script plugin for Squarespace -->

The <script> tags let Squarespace know this is JavaScript code and not HTML.

Line 2 (or line 3 on the Brine-family version) 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

 

Adjustments

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 third and fourth lines of the CSS above. 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. 

You can customise how far the visitor must scroll before the button appears (or disappears) by adjusting line 2 in step 3.

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. If you have any ideas for changes or additions, please message me.