Tutorials
comments 10

Create a Back-to-Top in Squarespace

There are times I get lost reading a blog because it is just too long. You get at the bottom of the page and realized that you need to go a long way back up. If you want your readers to easily do it, you may use this simple tutorial for your website or blog running on Squarespace. Beginners will definitely follow along easily with this tutorial.

To make this script work, you have to load jQuery by pasting this into the Code injection Header Field:

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

1. Paste this into SettingsAdvancedCode InjectionHeader Field:

<a href="#" class="back-to-top">Back to Top</a>

2. Paste this into SettingsAdvancedCode InjectionFooter Field:

<!-- BACK TO TOP -->
<script>
var amountScrolled = 300;

$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
</script>
<script>
$('a.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 400);
return false;
});
</script>

3. Paste this into Design -> Custom CSS:

// BACK TO TOP ARROW /////

a.back-to-top {
display: none;
width: 50px;
height: 50px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 30px;
bottom: 50px;
background: transparent url("http://static1.squarespace.com/static/55dad67ee4b0dd2379661ece/t/566ee701cbced656be3557e5/1450108673612/arrows-48px-glyph-1_circle-up-39+%281%29.png") no-repeat center 43%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}

a:hover.back-to-top {
transform: scale(1.1);
}

You may play with the CSS codes to adapt to your website or blog needs or design.

After successfully setting it up, you should now be able to see the image and click it to go up. I have this set up on my blog so you should see the result while reading this tutorial. I hope this helps. 🙂

10 Comments

  1. This is a great feature to have. I will try and add it on to some on my longer posts. Thanks!

  2. Luckily my theme already came with a back to the top bottom. I am not good a coding but a very informative post

  3. Lynn White says

    I use WordPress. I’m sure Squarespace users will find this so helpful. Great tutorial!

  4. Sorry, I am a user of WordPress so this is lost on me. Thank you for sharing though as there are people who would benefit from this post. 🙂

  5. I am currently lost in all those codes. I use wordpress, btw. I am sure this would be helpful one day if I decide to switch platform.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.