In this post, we will learn how to create “Back to top” button in Squarespace.

Features

• Only appear when scroll down
• Disappear when scrolled up near the top of the site

1. Add HTML & Script to Footer

Go to Settings > Advanced > Code Injection > Footer.

Then insert the following code

<a href="#" class="zk-to-top"><span class="arrow"></span>Top</a>
<script>
var _0x56ff=['html,\x20body','animate','slow','a.zk-to-top','click','scroll','scrollTop','fadeOut','fadeIn'];(function(_0x3bad31,_0x56ffea){var _0x5b4d7e=function(_0x343d44){while(--_0x343d44){_0x3bad31['push'](_0x3bad31['shift']());}};_0x5b4d7e(++_0x56ffea);}(_0x56ff,0x15e));var _0x5b4d=function(_0x3bad31,_0x56ffea){_0x3bad31=_0x3bad31-0x0;var _0x5b4d7e=_0x56ff[_0x3bad31];return _0x5b4d7e;};var amountScrolled=0x12c;$(window)[_0x5b4d('0x6')](function(){if($(window)[_0x5b4d('0x7')]()>amountScrolled){$(_0x5b4d('0x4'))[_0x5b4d('0x0')](_0x5b4d('0x3'));}else{$(_0x5b4d('0x4'))[_0x5b4d('0x8')](_0x5b4d('0x3'));}});$(_0x5b4d('0x4'))[_0x5b4d('0x5')](function(){$(_0x5b4d('0x1'))[_0x5b4d('0x2')]({'scrollTop':0x0},0x2bc);return![];});
</script>

2. Add CSS to Custom CSS

Go to Design

Next, click Custom CSS

and insert the following CSS code

/* Back to Top */
.zk-to-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;
}
.zk-to-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;
}
.zk-to-top .arrow {display:inline;}

Reference: W3Schools

Done. If you have any question, just comment below.