Add a custom image back-to-the- top arrow on your Squarespace site
This code enables you to incorporate a personalised back-to-top arrow on your site, perfect for those endlessly scrollable pages of text!
Add to Custom CSS
Copy this code and paste into Custom CSS. This can be found in Website Tools > Custom CSS
/* Back to Top Button with Image */ #back-to-top { position: fixed; bottom: 30px; right: 30px; display: none; width: 50px; height: 50px; background-image: url(Replace with image URL here); /* Replace with your uploaded image URL */ background-size: cover; background-position: center; border-radius: 50%; /* Optional: Keep circular shape */ cursor: pointer; z-index: 9999; } #back-to-top:hover { opacity: 0.8; /* Optional: Add hover effect */ }
Add to Code Injection Footer
<!-- Back to Top Button --> <div id="back-to-top" onclick="scrollToTop()"></div> <!-- JavaScript for Scroll to Top Functionality --> <script> // Show the button when user scrolls down window.onscroll = function() { const backToTopButton = document.getElementById("back-to-top"); if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { backToTopButton.style.display = "block"; } else { backToTopButton.style.display = "none"; } }; // Scroll to top function function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } </script>