Scroll-to-Top Button

How to Add a Custom Scroll-to-Top Button in Squarespace: A Fun, Easy Guide

Looking to add a simple Scroll-to-Top button to your Squarespace website? It’s a neat little feature that improves navigation. You can see it in action scrolling on this page!

Guess what? You don’t need to be a coding wizard to do it! Follow these easy steps to create and customize your very own button.

Difficulty Level:

• Total Beginner: 3/10 (Don’t worry, it’s not scary!)

• Intermediate: 2/10 (You’ve got this!)

• Expert: 1/10 (This will be a breeze.)

Let’s jump into it, step by step.

Step 1: Add the Button to Your Page

First, we need to create the actual button that will appear when users scroll down. In Squarespace, you'll do this using HTML blocks.

1. Go to the Page Editor:

   • In Squarespace, open the page where you want the Scroll-to-Top button.

   • Click Edit on any section.

2. Add an HTML Block:

   • Scroll down to where you want to place your code and click + Add Block.

   • Choose the Code block (it looks like a small </> symbol).

3. Insert the HTML:

   • Copy and paste the following HTML into the code block:

<div id="scrollTopBtn" style="display: none;">
  <a href="#top" class="scroll-to-top">&#8679;</a>
</div>

Copy Code

This creates a simple button with an arrow symbol (↑) that links back to the top of your page.

Step 2: Add Some Style with CSS

Now, let’s make that button look sleek! We’ll use CSS to position the button and make it look nice.

1. Open the Custom CSS Editor:

   • In the Squarespace dashboard, go to Design > Custom CSS.

2. Paste the CSS:

   • Add this CSS to make the button appear in the bottom right corner, give it a round shape, and ensure it’s visible when needed:

#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #000;
    color: #fff;
    padding: 10px 15px;
    border-radius: 50px;
    z-index: 1000;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease;
}

#scrollTopBtn a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

#scrollTopBtn:hover {
    background-color: #555;
}

Copy Code

Save Your Changes:

• Hit Save! Now, your button will look good, but it won’t appear until we add some magic in the next step.

Step 3: Make the Button Appear and Scroll with JavaScript

Now we’ll make the button appear only when the user scrolls down the page, and make it smoothly scroll back to the top when clicked. Here’s where JavaScript comes into play.

1. Go to Code Injection:

   • Head to Settings > Advanced > Code Injection in Squarespace.

2. Paste this JavaScript into the Footer:

<script>
// Scroll-to-Top Button functionality
window.addEventListener("scroll", function() {
    var scrollTopBtn = document.getElementById("scrollTopBtn");
    if (scrollTopBtn) { // Ensure button exists
        if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
            scrollTopBtn.style.display = "block";
        } else {
            scrollTopBtn.style.display = "none";
        }
    }
});

// Smooth scroll to top for the Scroll-to-Top button
document.addEventListener("DOMContentLoaded", function() {
    var scrollTopBtn = document.getElementById("scrollTopBtn");
    if (scrollTopBtn) {
        scrollTopBtn.addEventListener("click", function(e) {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
        });
    }
});
</script>

Copy Code

This code does two things:

• Shows the button when the user scrolls down the page (after 300px).

• Smoothly scrolls back to the top when the button is clicked.

Save your changes! Now, your Scroll-to-Top button will appear when needed and smoothly take users back to the top.

Step 4: Customize the Button (Optional Fun Stuff!)

Want to spice it up? Here are some extra customizations.

Positioning the Button:

Want to change where the button appears? You can tweak the CSS. For example:

Bottom-left:

#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: auto;
}

Copy Code

Bottom-middle:

#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

Copy Code

Change the Arrow to Text:

Prefer to show "Scroll to Top" instead of an arrow? Easy!

In the HTML block, replace the arrow (⇧) with Scroll to Top:

<div id="scrollTopBtn" style="display: none;">
  <a href="#top" class="scroll-to-top">Scroll to Top</a>
</div>

Copy Code

Use an Icon or Image:

To use an icon, you can add FontAwesome or your own image:

<div id="scrollTopBtn" style="display: none;">
  <a href="#top" class="scroll-to-top">
    <i class="fas fa-arrow-up"></i>
  </a>
</div>

Copy Code

If you haven’t included FontAwesome in your site, add this link in the Code Injection area (in Settings > Advanced > Code Injection > Header)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Copy Code

Use an Image (Custom Image):

You can also use a custom image instead of an icon or text.

<div id="scrollTopBtn" style="display: none;">
  <a href="#top" class="scroll-to-top">
    <img src="path-to-your-image.png" alt="Scroll to Top" style="width: 40px; height: 40px;">
  </a>
</div>

Copy Code

You Did It!

Congratulations! You’ve just added a Scroll-to-Top button to your Squarespace site. Whether you used text, an icon, or a graphic, you now have a neat little feature that makes it easier for visitors to navigate your pages. And the best part? You’ve just written and implemented some HTML, CSS, and JavaScript!

Feel free to experiment with the design and functionality until it’s perfect. And don’t worry if you’re a total beginner—this is a great way to dip your toes into custom web development.

Happy scrolling! 🚀

If you need any help installing the scroll to top button feel free to get in touch with our support at letstalk@usual.ie.

⇧