BackToTop2.gif

Back To Top

Allow your users to easily and smoothly scroll back to the top of a page on the click of a button! Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.

 

 

Step 1: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area or in the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

Copy & paste this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<a href="#" class="hs-back-to-top"><span class="arrow"></span>Top</a>
<script>$(document).ready(function(){var o=300;$(window).scroll(function(){$(window).scrollTop()>o?$("a.hs-back-to-top").fadeIn("slow"):$("a.hs-back-to-top").fadeOut("slow")}),$("a.hs-back-to-top").click(function(){return $("html, body").animate({scrollTop:0},700),!1})});</script>
 

Site wide Code Injection:

 

Individual Page Header Code Injection:

 

 

Step 2: Insert the CSS

Insert one of the code snippets below into your Squarespace site's Custom CSS editor or the Individual Page Header CSS injection (more info below) - the values in bold can be changed to suit your branding and site design

The values in bold can be changed to suit your branding and site design. 

Where colour values are added, you can use either of the following:

  • Valid colour name e.g. 'red' or 'yellow'
  • Hex value e.g. #FECB2F
  • RGB(a) value e.g. rgb (255,255,255) or rgba (255,255,255,0.8)  - optional opacity value '0.8'
  • HSL(s) value e.g. hsl (0, 0%, 20%) or hsla (0, 0%, 20%, 0.8) optional opacity value '0.8'

If you need help finding colours and building colour palettes - coolors.io is an awesome resource!
 

Right-aligned:

/* RIGHT BACK TO TOP BUTTON CSS */

.hs-back-to-top {
    font-weight: 500 !important;
    background-color: #FECB2F;
    color: #333333; 
    bottom: 10px;     
    right: 23px;
    width: 50px;     
    height: 50px;
    display: none;
    z-index: 999;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  a.hs-back-to-top {
    font-weight: 400;
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.8;
    padding-left: 2px;
    padding-top: 4px;    
  }

  a.hs-back-to-top .arrow:before {
    content: "\e02d";
    font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    speak: none;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
  }

 

Left-aligned:

/* LEFT BACK TO TOP BUTTON CSS */

.hs-back-to-top {
    font-weight: 500 !important;
    background-color: #FECB2F;
    color: #333333; 
    bottom: 10px;     
    left: 23px;
    width: 50px;     
    height: 50px;
    display: none;
    z-index: 999;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  a.hs-back-to-top {
    font-weight: 400;
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.8;
    padding-left: 2px;
    padding-top: 4px;    
  }

  a.hs-back-to-top .arrow:before {
    content: "\e02d";
    font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    speak: none;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
  }

 

Centre-aligned:

/* CENTRE BACK TO TOP BUTTON CSS */

.hs-back-to-top {
    font-weight: 500 !important;
    background-color: #FECB2F;
    color: #333333; 
    bottom: 10px;     
    left: 50%;
    width: 50px;     
    height: 50px;
    display: none;
    z-index: 999;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  a.hs-back-to-top {
    font-weight: 400;
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.8;
    padding-left: 2px;
    padding-top: 4px;    
  }

  a.hs-back-to-top .arrow:before {
    content: "\e02d";
    font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    speak: none;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
  }
 

Finding your Custom CSS editor:

 

Individual Page Header CSS injection

 

⚡️Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.