How to add a Scroll to top button? In Squarespace
Featuring a Scroll to top button on a Squarespace is a good practice and improves the UX (User Experience) as it enables the visitors to return to the top of the page easily. I’ll be explaining to you guys the ins and outs of it, why we need it, what it is, how it works, and more, as well as the step-by-step implementation using HTML, CSS, and Javascript.
What is a Scroll to Top Button?
The Scroll to Top button is a floating button that is displayed whenever a user scrolls down in a website/article. When tapped, it will scroll to the top of the page.
Why is it needed?
Improves user experience- Users don't need to scroll back to the top manually.
Enhance navigation – So great for long pages such as blogs, product listings, or landing pages.
Lowers bounce rate—Keep users engaged to keep them on their site longer; instead of scrolling away from the site, they are already bored with visiting.
Increases accessibility—Aids people with mobility impairments to access the site more easily.
How Does It Work?
The button is invisible when a user is at the top of the page.
The button fades in or slides into view as the user scrolls.
Click it, and the page gently scrolls back to the top.
In this, HTML is used for structure, CSS is used for styling, and JavaScript is used for interactivity.
Step-by-Step Implementation
Step 1: Add the Button (HTML)
Where to add:
Go to Settings → Advanced → Code Injection → Footer
Paste this code:
<!-- Scroll to Top Button -->
<div id="scrollToTop" class="scroll-top"> 🡡 </div>
Step 2: Style the Button (CSS)
Where to add:
Go to Design → Custom CSS
Paste this code:
/* Scroll to Top Button */
.scroll-top {
position: fixed;
bottom: 20px;
right: 20px;
background: #ff6600;
color: white;
padding: 10px 14px;
font-size: 18px;
border-radius: 50px;
cursor: pointer;
display: none; /* Initially hidden */
transition: 0.2s ease-in-out;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
z-index: 9999999 ;
}
/* Hover Effect */
.scroll-top:hover {
background: #ff3300;
}
/* Smooth Fade In & Out */
.show-scroll {
display: block;
opacity: 1;
}
.hide-scroll {
opacity: 0;
transition: 0.2s ease-in-out;
}
Step 3: Add Scroll Functionality (JavaScript)
Where to add:
Back to Settings → Advanced → Code Injection → Footer
Paste this script right below your HTML code:
<script>
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("scrollToTop");
window.addEventListener("scroll", () =>
btn.classList.toggle("show-scroll", window.scrollY > 300)
);
btn.addEventListener("click", () => {
const start = window.scrollY, startTime = performance.now();
const scroll = now => {
const t = Math.min((now - startTime) / 1500, 1);
const ease = 1 - Math.pow(1 - t, 3);
window.scrollTo(0, start * (1 - ease));
if (t < 1) requestAnimationFrame(scroll);
};
requestAnimationFrame(scroll);
});
});
</script>
How to Use the Code?
Paste the HTML inside Settings > Advanced > Code Injection > Footer.
Paste the CSS inside Design > Custom CSS.
Paste the JavaScript inside Settings > Advanced > Code Injection > Footer.
Save and refresh your site to see the button in action!
Customization Options
Change the button position
Adjust the bottom: 20px; and right: 20px; in CSS to move the button.
Modify the design
Change background color (background: #ff6600;) or padding (padding: 12px 18px;).
Use an icon instead of text
Use an Icon Instead of Text:
Replace with:
<i class="fa fa-arrow-up"></i>
And make sure to include FontAwesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
Add the above <link> in:
Settings → Advanced → Code Injection → Header
Final Thoughts
Adding a Scroll to Top button improves usability and makes navigation easier, especially for mobile users. With this guide, you now have a fully functional, responsive, and smooth-scrolling button on your Squarespace site.
FAQ: Adding a Scroll to Top Button in Squarespace
1. How do I add a scroll to top button in Squarespace without using plugins?
You can include it yourself by adding custom HTML/CSS/JavaScript in Settings > Advanced > Code Injection or Design > Custom CSS. There's no third-party plug-in required.
2. Why is my scroll to top button not visible on the home page?
And the button shows only if the user scrolls 300px down. If it still doesn't show, find out if there is something wrong. Scroll-top { display: none; } and your JavaScript adds the show-scroll class just fine.
3. Is there a way to set a custom design for the scroll to top button in Squarespace?
Yes. You can use Custom CSS to modify its size, color, icon, position, and hover effects. You can also style or place as you want, like background/padding/bottom/right, etc., and modify var values inside the function according to styling and placement.
4. How do I use an icon instead of text for the scroll button?
Replace the button content with a FontAwesome icon like:
<i class="fa fa-arrow-up"></i>
Be sure to include the FontAwesome stylesheet in Code Injection > Header.
5. Will this scroll button be functional on mobiles in squarespace?
Yes, the button is fully Responsive. It is fixed-positioned as well, and it becomes visible as users scroll, so it works on desktop, tablet, and mobile views.
6. Is a scroll back to top button helpful for Squarespace SEO or the users?
Yes. Although it doesn’t directly affect your SEO ranking, it will help in providing a better experience for users of any device and enable them to scroll through long pages easily without bouncing.
