How to Add Back to Top Button in Squarespace (7.0 & 7.1)

What is a Back to Top Button?

A back to top button is a small clickable icon or text link that is usually placed at the bottom of a web page, which allows users to quickly return to the top of the page with a single click. This feature can be particularly useful for websites with long pages or content-heavy pages, as it provides an easy way for users to navigate back to the top without having to manually scroll through the entire page

Why you Need a Back to Top Button?

1. Improved user experience: A back to top button allows users to quickly and easily navigate back to the top of the page, improving their overall experience on your website.

2. Increased user engagement: By providing an easy way for users to navigate back to the top of the page, they are more likely to engage with your content and explore your website further.

3. Better accessibility: A back to top button is especially helpful for users with disabilities who may have difficulty scrolling through a long page. It makes it easier for them to navigate and access the content they need.

4. Time-saving: A back to top button saves users time by allowing them to quickly return to the top of the page instead of scrolling all the way back up.

5. Better mobile experience: With more people accessing websites on their mobile devices, having a back to top button is crucial for providing a smooth and seamless mobile experience.

Code:

On your backend:

Go to Settings > Advanced > Code Injections > Footer and Paste the following code:

<!--- Back to top Button Start--->
<script src="https://kit.fontawesome.com/cb32c4aede.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<style>
  #myBtn {
    position: fixed;
    bottom: 20px; /* Distance from the bottom */
    right: 20px;  /* Distance from the right */
    z-index: 99;
    font-size: 18px; /* size of the icon */
    border: none; /* add border if you want */
    outline: none;
    background-color: inherit; /* Set up background color here */
    color: inherit; /* icon's color */
    cursor: pointer;
    padding: 10px 15px; /* change paddings here*/
    border-radius: 100%;
	box-shadow: 3px 3px 5px #aaaaaa;
  }
  #myBtn:hover {
    background-color: inherit; /* Set up HOVER background color here */
    color: inherit; /* Hover icon's color */
  }
</style>
<button onclick="topFunction()" id="myBtn" title="Go to top"> <i class='fa fa-angle-double-up'></i></button>
<script>
  //Get the button
  var mybutton = document.getElementById("myBtn");

  // When the user scrolls down 20px from the top of the document, show the button
  window.onscroll = function () { scrollFunction() };

  function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      mybutton.style.display = "block";
    } else {
      mybutton.style.display = "none";
    }
  }

  // When the user clicks on the button, scroll to the top of the document
  function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  }
</script>
<!--- Back to top Button End--->