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 Settings → Advanced → Code Injection → Header Field:
<a href="#" class="back-to-top">Back to Top</a>
2. Paste this into Settings → Advanced → Code Injection → Footer 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%; border-radius: 30px; 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