Squarespace scroll-to-bottom and scroll-to-top button

Out-of-the-box solution for a scroll to top or scroll to bottom button does not exist in Squarespace but you can create one easily with my little trick.

First you create a code block in any section of your page:

Inside that code block, you write an HTML code with a link tag that has an arrow character inside:

After this you can add here the css code in a style tag, where you specify the top or bottom and horizontal position of the button, the way it will look and some mouse over effect:

Finally we add a short script, with an event listener for the click event that will trigger a scroll action for the window with smooth scrolling effect. The window will scroll the entire scroll height of the document.

Ok, but how can I create a scroll to top button?

The same way as with the scroll to bottom button, but instead of the top: document.body.scrollHeight you will add a top: 0;

Also instead of ↓ html entity you can use the &uarr entity.

But I want the button to disappear when it’s on the bottom

In order to check if we arrive almost on the bottom of the document we compare the window.innerHeight + window.scrollY with document.body.scrollHeight – 20:

I will leave here the code for the codeblock for you to copy paste:

<a href="#!" id="scrollToBottom" class="scrollToBottom">&darr;</a>

<style>
  .scrollToBottom {
     position: fixed;
     right: 10px;
     top: 100px;
     z-index: 100;
     background: #000;
     color: fff;
     width: 50px;
     height: 50px; 
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     transition: opacity 0.6s;
  }
  .scrollToBottom:hover {
    opacity: 0.85;
  }
</style>

<script>
  document.getElementById('scrollToBottom').addEventListener('click', () => {
    window.scrollTo({ 
      left: 0, 
      top: document.body.scrollHeight, 
      behavior: "smooth" 
    });
  });
window.onscroll = () => {
    if(window.innerHeight + window.scrollY > document.body.scrollHeight - 20 ) {
      document.getElementById('scrollToBottom').style.display = 'none';
    }
    else {
      document.getElementById('scrollToBottom').style.display = '';
    }
  }
</script>

Enjoy !

For a video explanation please watch my video on Youtube:

0