How to add a Back to Top button in Squarespace

To add a Back to Top button in Squarespace, we will use this free tool.

In this case, I will adjust some code to make it work on Personal Plan and Business Plan/higher.

A. Business Plan/Higher

#1. Use this code to Code Injection – Footer

<!-- Scroll To Top Button HTML -->
<button id="wm-back-to-top">
  <div class="btt-background"></div>
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Arrow Up</title>
      <path data-name="layer2" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M32 10v46" stroke-linejoin="round" stroke-linecap="round"></path>
      <path data-name="layer1" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M50 20 L32 4 14 20" stroke-linejoin="round" stroke-linecap="round"></path>
    </svg>
  </div>

</button>

<!-- Scroll To Top Button Javascript -->
<script>
(function() {
  let throttlePause;

  document.addEventListener('click', function(e) {
    if (!e.target.closest('#wm-back-to-top')) return;
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  })

  document.addEventListener('DOMContentLoaded', function(){
    let btt = document.querySelector('#wm-back-to-top');
    let body = document.body;
    body.append(btt);
    if (btt?.closest('.sqs-block-content')){
      btt.closest('.sqs-block-content').style.display = 'inline';
    }
  });

  const throttle = (callback, time) => {
    if (throttlePause) return;

    throttlePause = true;
    setTimeout(() => {
      callback();
      throttlePause = false;
    }, time);
  };

  const checkPos = () => {
    let pos = document.documentElement.scrollTop,
        revealHeight = window.innerHeight * 0.15,
        bttButton = document.querySelector('#wm-back-to-top');
    if (pos >= revealHeight) {
      bttButton.classList.add('show');
    } else {
      bttButton.classList.remove('show');
    }
  }

  window.addEventListener("scroll", () => {
    throttle(checkPos, 150);
  });
  window.addEventListener('DOMContentLoaded', checkPos)
}());
</script>

#2. And use this code to Custom CSS box

/**
 * Back To Top Button Styles
 * From Will-Myers.com
 */
#wm-back-to-top {
  z-index:999;
  position:fixed;
  display:flex;
  bottom:0;
  right:0;
  min-width: 30px;
  min-height: 30px;
  flex-direction: row;
  gap: 8px;
  align-items:center;
  justify-content:center;
  box-sizing:content-box;
  margin: 8px;
  padding: 8px;
  cursor:pointer;
  opacity:0;
  overflow:hidden;
  transform: translateY(0px) scale(1);
  background:transparent;
  border-radius: 50px;
  border-width: 0px;
  border-color: #000000;
  border-style:solid;
  visibility:hidden;
  transition: opacity .3s ease,
    transform .3s ease,
    visibility 0s ease .3s;
  will-change:transform;
  backdrop-filter: blur(0px);

  &.show{
    transform: translateY(0px);
    opacity:1;
    visibility: visible;
    transition: opacity .3s ease,
      transform .3s ease,
      visibility 0s ease 0s;
  }
  .icon{
    position:relative;
    display:flex;
    justify-content:center;
    line-height:0;
    height:auto;
    width:auto;
  }
  .text{
    position:relative;
    margin:0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #000000;
    text-transform: uppercase;
  }
  svg{
    width: 20px;
    height: 20px;
  }
  path{
    stroke-width: 5px;
    stroke: #000000;
  }
  .btt-background {
    box-sizing:border-box;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color: #ff7f50;
    opacity: 1;
    transition: opacity .3s ease;
  }

  &:hover{
    transform:translateY(-3px);
    opacity: .85;
  }
  &:active{
    transform: translateY(-3px) scale(.95);
  }
}

B. Personal Plan

#1. Edit Site Footer > Add a Code Block

#2. Paste this code into Code Block

<!-- Scroll To Top Button HTML -->
<button id="wm-back-to-top">
  <div class="btt-background"></div>
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Arrow Up</title>
      <path data-name="layer2" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M32 10v46" stroke-linejoin="round" stroke-linecap="round"></path>
      <path data-name="layer1" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M50 20 L32 4 14 20" stroke-linejoin="round" stroke-linecap="round"></path>
    </svg>
  </div>

</button>

#3. Use this code to Custom CSS

/**
 * Back To Top Button Styles
 * From Will-Myers.com
 */
#wm-back-to-top {
  z-index:999;
  position:fixed;
  display:flex;
  bottom:0;
  right:0;
  min-width: 30px;
  min-height: 30px;
  flex-direction: row;
  gap: 8px;
  align-items:center;
  justify-content:center;
  box-sizing:content-box;
  margin: 8px;
  padding: 8px;
  cursor:pointer;
  opacity:1;
  overflow:hidden;
  transform: translateY(0px) scale(1);
  background:transparent;
  border-radius: 50px;
  border-width: 0px;
  border-color: #000000;
  border-style:solid;
  visibility:visible;
  transition: opacity .3s ease,
    transform .3s ease,
    visibility 0s ease .3s;
  will-change:transform;
  backdrop-filter: blur(0px);

  &.show{
    transform: translateY(0px);
    opacity:1;
    visibility: visible;
    transition: opacity .3s ease,
      transform .3s ease,
      visibility 0s ease 0s;
  }
  .icon{
    position:relative;
    display:flex;
    justify-content:center;
    line-height:0;
    height:auto;
    width:auto;
  }
  .text{
    position:relative;
    margin:0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #000000;
    text-transform: uppercase;
  }
  svg{
    width: 20px;
    height: 20px;
  }
  path{
    stroke-width: 5px;
    stroke: #000000;
  }
  .btt-background {
    box-sizing:border-box;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color: #ff7f50;
    opacity: 1;
    transition: opacity .3s ease;
  }

  &:hover{
    transform:translateY(-3px);
    opacity: .85;
  }
  &:active{
    transform: translateY(-3px) scale(.95);
  }
}
footer.sections {
  z-index: 9999 !important;
}
div.code-block:has(.btt-background) div {
    opacity: 1 !important;
}