(Updated) Adding a back to top button to your Squarespace template

May 2018: FA released a new way to embed their fonts on your site through an external <link> tag. However, this tutorial was made for the "SVG with JS" <script> tag. You'll need to embed this last one to have the arrow centered!
March 2018: the code in this tutorial has been updated to work with the newest version of Font Awesome. You'll need to add it to your website if going for Option #2

 

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!

 

Here's the 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;
}

 

OPTION #2

<!-- HTML inside Site's Code Injection/Page Settings Header -->
//Font Awesome script should go here! This tutorial uses the one under "SVG with JS"
<a href="#" class="btt"><i class="fas fa-chevron-up"></i></a>

 

<!-- HTML inside Site's Code Injection Footer -->
<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 .svg-inline--fa {
  color: #191717;
  position: relative;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
a.btt:hover {
  transform: translatey(-10%);
}

 

Tutorial

(Not enough time to dig in this post? Then skip ahead to read the important notes at the end!)

 

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. 

Note: if you don't have the latest version of Font Awesome embedded on your site, simply got to Get Started, copy the script where it says "Use Font Awesome Free CDN" and paste that in your Squarespace site header by going into Settings > Advanced > Code Injection.

 

For this example, we'll go with a nice chevron up arrow.

Copy the code right below it and insert it into the HTML snippet of the previous style option like so:

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

This code should go into the header portion of your individual page (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.

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, we'll target the arrow by its class name svg-inline--fa, change its color, and center it inside the button with the help of the left offset and transform property, like so:

a.btt .svg-inline--fa {
  color: #191717;
  position: relative;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
 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 and check if you have this either in the header or footer section:

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

 

If you don’t have it, you'll need to paste it right before the script below.

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

 

As with most scripts, this 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:

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


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. You'll need to click on Get Started and copy the code inside "SVG with JS" since that's the one this tutorial was made for.
     
  • If your arrow is not centered, check that you're using the code snippet given inside the "SVG with JS" tab, since that's the one this tutorial was made for.
     
  • 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.

 

Until next time,
B.

 

LIKED THIS POST?

I'd love it if you shared!


More Squarespace tips & tricks this way