To add a Back to Top button in Squarespace, we will use this free tool.
- You can also use Back to Top widget to do this.
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>
<a class="icon" href="#">
<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>
</a>
</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;
}
