"Scroll Up Button" for any Squarespace Website

If you are looking for a very easy way to link back to the top of your page without any extra scripts, here is a super simple solution for just doing that.

Step 1 - Add a "Code Block" where you want to insert the button
Step 2 - Make sure it’s set to HTML and the Display Source option is unchecked
Step 3 - Add this code:

<a href="#" class="scrollup">Scroll Up</a>


To change the feel, look and design follow along...

CSS - Design It

.scrollup {
   width: 50px;
   height: 50px;
   opacity: 0.5;
   position: fixed;
   bottom: 50px;
   right: 100px;
   text-indent: -9999px;
   background: url('scroll-up-icon.png') no-repeat;

Replace 'scroll-up-icon.png' with your scroll up button and you can mess with the exact positioning, color, width, ... with the according CSS values.

You are looking for a smooth scroll up then just a big jump. Here is how...


Step 1 - Go to "Page Header Code Injection"
Step 2 - Add this code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

   $(document).ready(function () {
       $(window).scroll(function () {
           if ($(this).scrollTop() > 100) {
           } else {
       $('.scrollup').click(function () {
           $("html, body").animate({
               scrollTop: 0
           }, 600);
           return false;