Back to top buttons are a great way to help your readers navigate your site. However, Squarespace does not have a built-in back to top button feature. Fortunately, there are a few workarounds that can help you add a back to top button to your Squarespace site.
One workaround is to use the Page Scroll to Top Button plugin. This plugin adds a button to the bottom of your page that, when clicked, takes the reader back to the top of the page.
Another workaround is to use HTML and CSS to create your own back to top button. This method requires a bit more code, but it gives you more control over the appearance of your button.
To add a back to top button using the Page Scroll to Top Button plugin:
1. Go to the Page Scroll to Top Button website and click Download.
2. Unzip the downloaded file and upload the contents of the folder (ps2tob-master) to your Squarespace site. For help uploading files, check out this guide.
3.In the Home Menu, click Pages and then click the + icon next to the page you want to add the button to.
4. In the Page Editor, click Code Injection in the left sidebar.
5. In the Header Code Injection field, enter the following code:
<script src="/ps2tob-master/ps2tob.js"></script>
6. Click Save and then click Publish or Save & Close in the top-right corner of the Page Editor.
To add a back to top button using HTML and CSS:
1. In the Home Menu, click Pages and then click + icon next to the page you want to add the button to.
2. In the Page Editor, click Code Injection in the left sidebar.
3. In the Header Code Injection field, enter the following code:
<style>
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: #333;/*Change this background color*/
color: #fff;/* Change this text color*/
cursor: pointer;/*Add cursor on hover*/
}
#back-to-top i {/*Change icon color on hover*/
color:#fff !important;
}
</style>
<!-- Add Back To Top Button -->
<div id="back-to-top">
<i class="fa fa-chevron-up"></i>
</div>
<!-- End Back To Top Button -->4. In the Footer Code Injection field, enter or paste this code snippet:
<script> // ===== Scroll To Top ==== $(window).scroll(function() { if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px $('#back-to-top').fadeIn(200); // Fade in } else { $('#back-to-top').fadeOut(200); // Else fade out } }); $('#back-to-top').click(function() { $('body,html').animate({ scrollTop : 0 },500); }); </script>
5.Click Save and then click Publish or Save & Close in
