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>

 

Share this post:

16 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

Leave a Comment