Adding a Back to Top Button to Your Squarespace Template

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!

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

 

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 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%);
}

But in order to make the transition a bit smoother, you can use the transition property by adding an extra line to the previous snippet:

a.btt:hover{
transform: translatey(-10%);
transition: transform 0.3s ease-in-out;
}

And another one to the normal mode of your button:

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);
transform: translatey(0%);
}

In this case, the transtion property will switch from the original transform value translatey(0%) to translatey(-10%) during 0.3 seconds and with a slow entry into the movement.

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.

TO KEEP IN MIND

• 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).

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

 

Until next time,
B.


GRABBED YOUR CHEATSHEET YET?

If you want to learn more about CSS properties, then make sure to check out this online version!

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