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:

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

Leave a Comment