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
  • Irina Irina
    Reply

    Hi Vigasan,

    Thank you for sharing the code with us!

    I have a question regarding changing the style of the arrow, how can I go about to do this? 🙂

    Thank you in advance!
    Irina

    April 20, 2019 at 11:10 PM
  • Sandra George
    Reply

    Thank you for sharing this code and the very easy to follow instructions, much appreciated.

    April 27, 2019 at 4:04 AM
  • Rupa Kumar
    Reply

    Hi Vigasan,

    I am currently working with squarespace to build a website for myself. It is absolutely amazing to be able to create a website without knowledge of code. i was struggling with features like the ‘back to top button’.
    A couple of minutes ago i chanced upon your post https://www.abgtech.ca/blog/squarespace-how-to-add-a-back-to-top-button/.
    I have followed the steps and have managed to get my button working across devices.

    Thank you for sharing your knowledge!

    However i would like to simply have ^ instead of an arrow. Could you help with this ? (as is on the blog page you’ve shared the code on)

    Thanks,
    rupa

    May 16, 2019 at 6:51 AM
  • RL
    Reply

    Is it possible to change the position of the arrow to the middle of the page on the right?

    July 3, 2019 at 3:57 AM
  • Gerrard Clark
    Reply

    Hi Vigasan – great post, very helpful. When I input your code, the arrow shows up both on the desktop version and mobile version of my website. Could you advice on what code to add in so it only shows on the desktop? The button clutters the navigation on mobile and is not needed as I already have a mobile navigation menu. Thank you!

    July 7, 2019 at 5:53 AM
  • Andy
    Reply

    Hi Vigasan, thanks for this. Very very useful tool. However wanted to ask if there is away of have the icon fade in gradually, and not appear immediately when scrolling begins. So kinda a fade in and out. This would be super useful. Thanks again.

    September 9, 2019 at 10:34 AM

Leave a Reply