Back to Top Text Link

What does this code do?

This code snippet will allow you to add fixed text on your Squarespace Website that will scroll the users back to the top of the page.

Note: This code snippet uses text for the Back to Top link. If you would like to use a button instead, check out this code snippet.

Code Snippets

HTML

Copy and paste the following code in Settings > Advanced > Code Injection > Header.

<!-- Scroll to Top Text Link -->
<p onclick="scrollToTop()" id="scroll-button">To Top ↑</p>

This code automatically uses an Up Arrow . You can also replace the arrow with another other Unicode symbol.

Javascript

Copy and paste the following code in Settings > Advanced > Code Injection > Footer.

<!-- Scroll to Top Button -->
<script>
scrollButton = document.getElementById("scroll-button");

window.onscroll = function() {
  if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
    scrollButton.style.display = "block";
  } else {
    scrollButton.style.display = "none";
  }
}

function scrollToTop() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>

CSS

Copy and paste the code that matches the position you would like into Design > Custom CSS.

Button in Bottom Right

/* Scroll to Top Text Link */
html {
  scroll-behavior: smooth;
}

#scroll-button {
  display: none;
  position: fixed;
  z-index: 9999;
  bottom: 3vw; 
  right: 3vw;
  color: white; /*text color*/
  font-size: 1.2rem; /*text size */
  cursor: pointer;
}

Button in Bottom Left

/* Scroll to Top Text Link */
html {
  scroll-behavior: smooth;
}

#scroll-button {
  display: none;
  position: fixed;
  z-index: 9999;
  bottom: 3vw; 
  left: 3vw;
  color: white; /*text color*/
  font-size: 1.2rem; /*text size */
  cursor: pointer;
}

Then you can change the colors and sizes to customize the text.

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the symbol, size, and color.