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>
Previous
Previous

Adding a camera icon to Image blocks to show photo credits