Back To Top Link

Look Demo

Display a back to top link for quicker navigation when a visitor reaches the bottom of your website. This plugin uses css editor, code injection, and works with all template families.

How To Install

From your Squarespace account, go to Site Code Injection. Copy and paste the code below in the Code Injection Header box.

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

Next, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Back To Top Button //

.hs-back-to-top {
    font-weight: 500 !important;
/* adjust this to control the color */  
  background-color: #000000;
    color: #ffffff;
/* adjust this to control size and position */
    bottom: 20px;     
    right: 20px;
    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 {
/* adjust this to control "top" text style */
    font-weight: 600;
    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';
/* adjust this to control arrow styling */
    font-style: normal;
    font-weight: 600;
    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;
  }

Customize

Feel free to make any changes to colors, size, and position – or leave the code as is if you like the default settings.

License

This plugin comes with an Unlimited Use License. View License Terms