Adding a back to top button to your Squarespace template

Adding a sticky back to top button in your Squarespace site.

Having a back to top link or button on your site is not just handy, it’s common courtesy.

Your readers spared part of their time to read through your post or page content and now that they’re done, they have to scroll aaaaall the way up to read something else – hopefully inside your website.

In Squarespace, there are a couple of ways to add that link by injecting CSS and/or JQuery. But don’t worry, even if you don’t know code these are pretty simple to implement.

Take a look!

 

Option 1: Adding a link in your footer

You’re going to laugh at how simple this is.

To create a link that jumps back to the top of your page, you can add a Code Block to your footer and paste this snippet inside:

<a href="#" class="btt">Back to Top</a>
Adding a back to top link to a code block in Squarespace

That’s it. Seriously. And by the way you can change "Back to Top" to your own phrase.

Now to style it, you can target the btt class on your CSS injection window and change all the properties your heart desires to make it look stunning.

For example, you can change the font color, make it bold and align it to the center like this:

.btt {
  color: white;
  font-weight: bold;
  text-align: center;
  display: block;
}
Styling back to top link with CSS

 

Option 2: Adding a floating button

This option might work best for really long pages, or pages that have a menu box of some sort with several links that jump to different places of your page (anchor points). That way, your readers can easily go back up to the menu box and select a different link with just two clicks.

To create this button, you’ll need three different code snippets: one for the HTML to create the actual button on your page, one for the CSS to style the button, and one for the JQuery for the magic.

 

HTML

We’ll use the code from option one, but instead of having the Back to Top text, we’ll use an icon from Font Awesome. You can learn to easily install and use Font Awesome icons in your site, here.

For this example, let’s go with the nice chevron up arrow (fa-chevron-up) and insert it into the previous snippet like so:

<a href="#" class="btt"><i class="fa fa-chevron-up"></i></a>

Simply copy that and paste it into your page’s header (Gear icon > Advanced > Page header code injection),

Adding back to top button code inside the page's header.

or into your entire’s site header if you want to have it show up everywhere (Settings > Advanced > Code Injection > Header)

Inserting back to top button into the site's header.

Once you’ve done that, we’ll style the button first and then add the magical script to make it do its thing.

 

CSS

This part of the code should go inside Squarespace's CSS window, you can find it by going into Design > Custom CSS.

Within the following code chunks, there are some properties that should remain as they are to make the button stays in place, but you can alter others to style the arrow however you like.

The property values in light grey should read as shown once you finish tweaking the button, and if you need some help knowing what each property does you can get access to the CSS cheatsheet here.

First, to style the button itself, you can use the following snippet. This will help you position it and make it stick there the whole time.

Note: while tweaking the properties, set display: block; instead of display: none; so you can see what you're doing!

a.btt {
  display: none;
  position: fixed;
  z-index: 999;
  width: 50px;
  height: 50px;
  right: 30px;
  bottom: 30px;
  background: #ebebeb;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  box-shadow: 3px 3px 10px rgba(23, 25, 25, 0.2);
}
Adding CSS to style back to top button.

Next, in order to center the arrow, you need to position the arrow’s container first, like so:

a.btt .fa {
  width: 100%;
  height: 100%;
  display: table;
}

Lastly, to position the arrow inside the previous container you need to add this:

a.btt .fa-chevron-up:before {
  color: black;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
Centering arrow inside back to top button.

If you want to add a nice hover effect to the button, you can do that too! In this example, we can make the arrow move up just a tad with this:

a.btt:hover{
  transform: translatey(-10%);
}

And in order to make the transition a bit smoother, you can use the transition property by adding an extra line to the normal mode of the button (without the hover):

a.btt {
  display: none;
  position: fixed;
  z-index: 999;
  width: 50px;
  height: 50px;
  right: 30px;
  bottom: 30px;
  background: black;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  box-shadow: 3px 3px 10px rgba(23, 25, 25, 0.2);
  transition: transform 0.3s ease-in-out;
}

In this case, the transition property will make the transformation (translatey(-10%) ) happen during 0.3 seconds with a slow entry into and out of the movement.

In other words, your button will be lifted up gently in the span of 0.3 seconds and then gently put back in its place once the cursor stops touching it.

Hover mode on back to top button.

Cool right?!

You’ve been doing great so far, now for the last piece of code.

 

JQUERY

First, you have to load the JQuery library on your site if you haven’t already.

“Load the what...?”

Just go to Settings > Advanced > Code Injection > Page Header and check if you have this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

If you don’t, paste that. If you do, don’t paste it.

Note: keep in mind you might have another version installed, if you have a newer version than “3.2.1”, don’t paste anything.

Adding JQuery library to Squarespace's site header.

Now, the actual script is best implemented on your site’s footer to avoid slowing down your page speed. So go to Settings > Advanced > Code Injection > Page Footer and paste the following chunks:

<script>
var scrolled = 400;
$(window).scroll(function() {
  if ( $(window).scrollTop() > scrolled ) {
    $('a.btt').fadeIn('slow');
  } else {
    $('a.btt').fadeOut('slow');
  }
});
</script>

<script>
$('a.btt').click(function() {
  $('html, body').animate({ scrollTop: 0 }, 700);
  return false;
});
</script>
Adding back to top button script to Squarespace site.

Briefly, what that does is 1) make the button appear after a certain amount of pixels have been scrolled – 400 in this case –  and 2) make a nice scroll movement upwards when it’s clicked in 0.7 seconds (700 milliseconds).

Once you have all those code blocks in their right places, you’ll have something like this!

Final result of sticky back to top button added to Squarespace.

That wasn't that hard was it? And now you have an awesomely helpful button for your visitors to use!


FULL CODE (OPTION 1)

<!-- HTML inside Code Injection/Page Settings -->
<a href="#" class="btt">Back to Top</a>

 

/*CSS inside Custom CSS window*/
.btt {
  color: white;
  font-weight: bold;
  text-align: center;
  display: block;
}

 

FULL CODE (OPTION 2)

<!-- HTML inside Code Injection/Page Settings -->
<a href="#" class="btt"><i class="fa fa-chevron-up"></i></a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
var scrolled = 400;
$(window).scroll(function() {
  if ( $(window).scrollTop() > scrolled ) {
    $('a.btt').fadeIn('slow');
  } else {
    $('a.btt').fadeOut('slow');
  }
});
</script>

<script>
$('a.btt').click(function() {
  $('html, body').animate({ scrollTop: 0 }, 700);
  return false;
});
</script>

 

/*CSS inside Custom CSS window*/
a.btt {
  display: none;
  position: fixed;
  z-index: 999;
  width: 50px;
  height: 50px;
  right: 30px;
  bottom: 30px;
  background: #ebebeb;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  box-shadow: 3px 3px 10px rgba(23, 25, 25, 0.2);
  transition: transform 0.3s ease-in-out;
}

a.btt .fa {
  width: 100%;
  height: 100%;
  display: table;
}

a.btt .fa-chevron-up:before {
  color: black;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

a.btt:hover {
  transform: translatey(-10%);
}

To keep in mind

  • If you go with Option 2 and don't see the arrow, check if you have Font Awesome installed/embedded on your site. Here's a quick tutorial to do that if you haven't.
     
  • Remember to change back display: block; to display: none; in your CSS snippet after you're done tweaking the button!
     
  • If you rename the btt class, make sure to change the name everywhere else in the code.
     
  • If you use a different icon from Font awesome, paste the correct class name inside the <a> tag (fa-chevron-up in this example) and make sure to also change it on your CSS bit (where fa-chevron-up:before is located).

 

Until next time,
B.


A quick tutorial on adding a sticky back to top button to your Squarespace site, that you and your visitors will love