Create a Back to Top button on any template

Alright, so first things first, in order to make this code work, we will first be added 3 different codes within your websites header code injections. To get there click:

SETTINGS > ADVANCED > CODE INJECTIONS > HEADER.

The first code is for the Font Awesome icon to work within the back to top button. The second code is to enable the JQuery Code to make the button appear while scrolling. The third piece of code is the actual back to top button.

Copy the code below and paste it within the HEADER section.

<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0" crossorigin="anonymous"></script>

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

<a href="#" class="back-to-top"><i class="fas fa-angle-up"></i></a>
Screen Shot 2018-11-07 at 12.18.10 AM.png

Now, SCROLL DOWN just a little until you see the FOOTER section of the Code Injection. You will want to paste the code provided below. This creates the back to the top action with JQuery.

<!-- BACK TO TOP -->
<script>
var amountScrolled = 300;

$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
</script>
<script>
$('a.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 400);
return false;
});
</script>
Screen Shot 2018-11-06 at 11.23.40 PM.png

DON’T FORGET TO SAVE!

Now it’s time to style your back to top button. From your main navigation, you will want to click DESIGN > ADVANCED > CUSTOM CSS

// BACK TO TOP ARROW /////

a.back-to-top {
display: none;
width: 50px;
height: 50px;
  text-indent: 19px;
position: fixed;
z-index: 999;
right: 30px;
bottom: 50px;
background: #f9f9f9; /*this changes the color of the background*/
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}

a:hover.back-to-top {
transform: scale(1.1);
}

.fa-angle-up {
  padding-top: 17px;
  padding-left: 1px;
  font-size: 15px;
}

Feel free to change out the colors if you’d like so that it matches your branding.

You should be left with something like this:

Screen Shot 2018-11-07 at 12.15.51 AM.png