How to Add a Back to Top Button on Squarespace

Table of Contents

    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.

    Up-Arrow.jpg

    Step 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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous"></script>
    <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.

    Step 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.

    <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 }, 0);
       }
    </script>

    Step 3 - The CSS

    The following code is what gives style to our button. It also enabled the scroll to the top to be smooth. Add the following code to the DESIGN → CUSTOM CSS section.

    html {
      scroll-behavior: smooth !important;
    }
    
    #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;
    }

    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 them as soon as possible.


    Source: The code from W3Schools was adapted for this tutorial.

    Vigasan

    Hey! I’m Vigasan and I love the Internet. I have a Bachelor of Science in Computing Systems with a double specialization in Computer Science and Software Engineering. I’ve been creating websites and working with social media since 2014 and have created over 200 Squarespace websites so far.

    https://www.adlyticmarketing.com/
    Previous
    Previous

    Clickthrough URLs on Wexley and Wells Gallery in Squarespace

    Next
    Next

    How to Turn Off Hyphens in Text on Squarespace