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

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.