How to Add A Back To The Top Button to Squarespace

Are you looking to add some extra functionality to your Squarespace site with a Back to Top button? This automatic scroll to the top feature is easy to install and semi-customizable. Enjoy!

---

Step 1

Add the HTML & JavaScript code to your Squarespace site.

After you add the code, nothing will appear, this code is for the functionality of the Back To the Top button.

Settings > Advance > Code Injection > Footer

<!-- Scroll to the top -->
<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>
<!-- End Scroll to the top -->

<!-- Scroll to the top JS-->
<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 }, 750);
   }
</script>
<!-- Scroll to the top JS-->

Step 2

Now that you’ve added the HTML and JavaScript. The fun begins - customizing the button color to match your branding!

To add the physical button, add the CSS code below to your Squarespace site.

Design > Custom CSS

//Adding Custom Scroll to the Top//
#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: none;
   // Change the hex # to change background color
   background-color: #000000;}

#myBtn:hover {
   background-color: #b6cad5;}
//End Custom Scroll to the Top//

That’s it!

Reach out in the comments if you have any questions.

---

Disclaimer: Nestingzone is not affiliated or endorsed by Squarespace, we just love their platform. The term "Squarespace" is the registered trademark and property of Squarespace, inc.