Adding a "Back To Top" Button


Code block for the footer

1. Edit the footer

  1. Add a code block
  2. Set it to HTML and make sure the Display Source option is unchecked
  3. Add this code: <a href="#" class="scrollup">Scroll</a>

2. Paste CSS

Go to custom CSS and paste the following code:

 .scrollup {
   width: 50px;
   height: 50px;
   opacity: 0.3;
   position: fixed;
   bottom: 0px;
   right: 0px;
   display: none;
   text-indent: -9999px;
   background: url('ICON GOES HERE') no-repeat;

You can adjust the dimensions in width and height to fit your icon. My icon is 50px by 50px so having it any less would cut it off.

In the bottom and right section is where the button is placed to display. Bottom: 0 and right: 0 puts it in the bottom right corner. Bottom: 50 and right: 50 would place it 50 px from the bottom and right edges of the screen.

Lastly, replace ICON GOES HERE with any picture of your choosing. I made mine in Illustrator and saved it as a PNG to keep it transparent.

3. Add Page Header Code Injection

Go to Settings > Advanced > Code Injection. Add the following to your SquareSpace site's Page Header Injection:

<script src="//"></script>
   $(document).ready(function () {
       $(window).scroll(function () {
           if ($(this).scrollTop() > 500) {
           } else {
       $('.scrollup').click(function () {
           $("html, body").animate({
               scrollTop: 0
           }, 800);
           return false;

In the .scrollTop function, higher numbers (in milliseconds) slow down the scroll speed. I used 500 simply because I liked that speed best. You can play with this number to fit your style.

For scrollTop: 0, I left it at 0 so that the button takes the user to the very top of the page. This number can be played with until you figure out where you want users to scroll up to.  

Did you find this helpful? Share it below!



This code was adapted to this website from this post on SquareSpace Answers.