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.

  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').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;
       background-color: #a4a4a4;
       color: white;
       cursor: pointer;
       padding: 10px 10px 10px 11px;
       border-radius: 50%;
       box-shadow: 1px 1px 5px #000;
       font-size: 25px !important;
    }
    
    #myBtn:hover {
       background-color: #aeaeae;
    }
    

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.

No Comments

Leave a Reply