Squarespace: How to Add a Back to Top Button

Do you have a Squarespace website and are using a template that doesn’t have a “back to top” button? Here’s how you can add a back to top button to any Squarespace template.

Here’s what the button will look like, it’ll appear in the bottom right.

The final arrow output from this guide
  1. The HTML
    First, log into your Squarespace website and add the following code to SETTINGS > ADVANCED > CODE INJECTION > FOOTER.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fas fa-arrow-up"></i></button>

    This code will provide the actual button for us to style. It won’t do anything by itself just yet.

  2. The JavaScript
    We’re now going to add in the JavaScript which gives our button the function we need (scrolling back to the top). Add the following code to SETTINGS > ADVANCED > CODE INJECTION > FOOTER. Add this code just below the code we added in step 1. This code is set to take 1 second to scroll back to the top, if you want it faster or slower, change the “1000” in the last line of the code. It’s in milliseconds so if you want 0.5 seconds, use “500” and if you want 2 seconds, use “2000”.

    <script>
       window.onscroll = function() {scrollFunction()};
    
       function scrollFunction() {
          if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
             document.getElementById("myBtn").style.display = "block";
          } else {
             document.getElementById("myBtn").style.display = "none";
          }
       }
    
       function topFunction() {
          $('html,body').animate({ scrollTop: 0 }, 1000);
       }
    </script>
  3. The CSS
    The following code is what gives style to our button. Add the following code into the DESIGN > CUSTOM CSS section.

    #myBtn {
       width: 50px;
       height: 50px;
       display: none;
       position: fixed;
       bottom: 20px;
       right: 30px;
       z-index: 99;
       border: none;
       outline: none;
       font-size: 25px !important;
       color: white;
       cursor: pointer;
       padding: 10px 10px 10px 11px;
       border-radius: 50%;
       box-shadow: 1px 1px 5px #000;
       // Change the hex code in the next line to change background color
       background-color: #a4a4a4;
    }
    
    #myBtn:hover {
       background-color: #aeaeae;
    }
  4. Changing the icon color
    You can change the icon color by inserting this code into the bottom of DESIGN > CUSTOM CSS. Change the hex code to the color you want.

    .fa-arrow-up {
       color: #000;
    }

That should do it! You should be able to see the button in the bottom right. It appears after a visitor scrolls a little bit down the website. If you have any questions, feel free to comment and I’ll answer it as soon as possible.

Source: The code from W3Schools was adapted for this tutorial

MORE VIDEO TUTORIALS

Want more help? We have tons of YouTube tutorials on customizing your Squarespace website. Subscribe to our channel so you will know when a new tutorial is out.

Vigasan Gunasegaran About the author
vigasan@live.com

I've been working on Squarespace and WordPress websites for quite some time now. I enjoy how easy it is for clients to make updates to their own websites while using a CMS system. Outside of website design, I love good food, Netflix, and video games.

Comments:
  • Hi Vigasan,

    Today I found this https://www.abgtech.ca/blog/squarespace-how-to-add-a-back-to-top-button/ on the internet. I copied all the code into my squarespace site, as you suggest on this page.
    It works perfectly! I even managed to style it in the colors of my site.
    Thanks for this!!!

    However on iphone and tablet, it doesn’t work. You can see the button, but after pushing it has no effect.

    Can you help me to make this work on other devices too?

    Thanks,

    Steven

    April 12, 2019 at 1:24 PM
  • Works like a charm! Thanks

    April 15, 2019 at 9:59 AM
  • Is there a way to change the opacity and remove the drop shadow?

    April 17, 2019 at 10:52 AM

Leave a Reply