15 Custom Back-to-Top Buttons

 

Thank you for being a reader of my newsletter! Here's an exclusive freebie that you won't find anywhere else on this website. Enjoy!

back-to-top-buttons.png
 

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)

Instructions

Step 1: Inject the following code into Settings > Advanced > Code Injection > Header.

<span id="top"></span>

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

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

Step 4: 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 5: Paste your image URL somewhere safe as you're going to need it again soon.

Step 6: 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.

<!-- Styles your button (this is a 100x100 pixels image) -->
<style>
.back-to-top {
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    box-sizing: border-box;
    border-radius: 0%;
}
  
  .back-to-top, .back-to-top img {
    /* Change the width and height to be as big or as small as you want your back-to-top button to be. 100px or 50px are both solid choices. */
    width: 100px;
    height: 100px;
  }
  
  .back-to-top.show {
       opacity: 1;
  }
</style>

<!-- Adds the back to top link to your website. Replaces the text with an image of your choosing. Add your own image url where it says ADD URL HERE. -->
<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;"><img src="ADD URL HERE" ></a>

<!-- Fades in the button when you scroll down -->
<script>
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

function addClass(el, className) {

    if (el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }

}

function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');    
}
  
window.addEventListener('scroll', function(e) {
     if ( window.scrollY > amountScrolled ) {
         addClass(link, 'show');
     } else {
         removeClass(link, 'show');
     }
 });
</script>

 

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

Step 8: 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 100x100 pixels by default.

Step 9: 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 10: 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.