15 Custom Back-to-Top Buttons

These instructions are designed for Squarespace, but you can use the icons for any platform you choose.

15 different back to top images

This .zip file contains:

  • a README with link to these instructions

  • 15 different back-to-top buttons

  • a .psd file (to customize the buttons)

  • an Affinity Designer file (to customize the buttons)


Step 1: Choose or customize an image. Each of the images I have provided are 500×500 pixels. These are high-res .png images so you get a nice, crisp back-to-top button.

Step 2: Upload your image in Design > Custom CSS > Manage Custom Files.

Step 3: Click on the image to insert the image’s URL into the Custom CSS section. You can copy the URL from there (and then delete the URL from the Custom CSS section).

Step 4: Paste your image URL somewhere safe as you’re going to need it again soon.

Step 5: On a page that you want to display your back-to-top button, paste the following code into that page’s Page Settings > Advanced > Page Header Code Injection.

.back-to-top {
    /* Remove the background color */
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    /* Change the width and height to match your image dimensions */
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: 0%;
  .back-to-top.show {
       opacity: 1;

<a href="#" id="back-to-top" class="back-to-top" style="display: inline;"><img src="ADD URL HERE" ></a>

  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

  window.addEventListener('scroll', function(e) {
      if ( window.pageYOffset > amountScrolled ) {
      } else {
          link.className = 'back-to-top';

  link.addEventListener('click', function(e) {

      var distance = 0 - window.pageYOffset;
      var increments = distance/(500/16);
      function animateScroll() {
          window.scrollBy(0, increments);
          if (window.pageYOffset <= document.body.offsetTop) {
      // Loop the animation function
      var runAnimation = setInterval(animateScroll, 16);

Step 6: Add the image URL from Step 5 to the code below where it says ADD URL HERE.

Step 7: You can change the width and height of the button in the code below (there’s a comment in the code to show you how). This code uses a button that is 100×100 pixels by default.

Step 8: Test that your back-to-top button is working (you’ll need to test it on the live version of your website as the code may not work while you’re editing your website).

Step 9: Copy/paste your new code to any other page’s Page Settings where you want a back-to-top button.

If you have any questions about any of the steps here, please get in touch with me! I’ll be happy to help you out.