Buy me a coffee

Squarespace: Add Back to Top Button

In this post, I will share the code to create a “Back to top” button in Squarespace (for both Personal Plan & higher)

1. Add HTML back to top

Go to Settings > Advanced > Code Injection > Footer (If you use Personal Plan > Edit Footer > Add Code Block > Paste below code)

Then insert the following code

<a href="#top" class="t-top"><span class="arrow"></span>Top</a>

2. Add CSS to Custom CSS

Go to Design

Next, clickย Custom CSS

and insert the following CSS code

/* Back to Top */
.t-top {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
}
.t-top .arrow:before {
      font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
}
.t-top .arrow {display:inline;}

Here the result.

3. Add JS

If you want the back to top to appear only when scrolling down near the footer, and disappear when scrolling to the top.

Add this code to Home > Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
       $(window).scroll(function () {
           if ($(this).scrollTop() > 200) {
               $('.t-top').fadeIn();
           } else {
               $('.t-top').fadeOut();
           }
       });
       $('.scrollup').click(function () {
           $("html, body").animate({
               scrollTop: 0
           }, 600);
           return false;
       });
   });
  </script>

 

29 thoughts on “Squarespace: Add Back to Top Button”

  1. Hi,
    It works ๐Ÿ™‚
    Question: What can I do if I want to see it in the footer only?
    It comes out when I scroll a bit, over picture… Not nice…
    Many thanks for your answer.

    Reply
  2. This clean, simple back-to-top button is perfect. I’ve added it to my site. However, it always shows; it doesn’t disappear. Any tip for getting it right it appreciated.

    DP

    Reply
  3. Thanks for this, Tuan. I added this to my store, but I am seeing it on the lower right even when scrolled all the way to the top of the page; it doesn’t disappear.

    Reply
  4. Dear Tuan,
    I’ve used ur code on my website. Though i like, it isn’t scroll like ur back to top button here โ‡’
    it goes to top directly without scroll all the way long. what code i need to fill to get scroll back to top? Pls don’t think i m greedy, even u provid like this easy way.๐Ÿ˜
    u r really our hero of squarespce addicted. thnks for everything.

    Reply
  5. Thank you. It works. Even it still appears on the first screen and sometimes I click but it doesn’t work. Can you review if it works with squarespace 7.1 for an eCommerce site?

    Reply
      • it’s still private for my employer, is this the correct footer injection? I can make changes if you see any mistakes:

        Top

        $(document).ready(function () {
        $(window).scroll(function () {
        if ($(this).scrollTop() > 200) {
        $(‘.t-top’).fadeIn();
        } else {
        $(‘.t-top’).fadeOut();
        }
        });
        $(‘.scrollup’).click(function () {
        $(“html, body”).animate({
        scrollTop: 0
        }, 600);
        return false;
        });
        });

        Reply
  6. The script tags are not showing up in these comments, but to clarify: I have copied and pasted both html and JS codes into my footer with no modifications. How can I get the function to work?

    Reply
    • Hi. You can paste code to code.beaverhero.com > Click Save >> Copy URL in Input box >> send me. I will check it again

      Reply

Leave a Reply to Eric Cancel reply

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder