Floating Scroll Back to Top Button in Squarespace
Update
I’ve updated this plugin and built a tool that allows you to create a back to top button super easy. Check it out here.
Let’s build a floating "Back to Top" button in the bottom right hand corner of your website. I’m also going to add some additional functionality so that it only appears after we’ve scrolled a little bit, we don’t want to take precious real-estate on our front page.
Here is a rough look of what we’re building, but with tweaks.
(the above link was built by Matthew Cain, not me)
To setup this tutorial, we’re going to:
Build the HTML structure of the button
Position the button
Design the button using CSS
Position the button when it should be out of view
Add in Scroll Event Listeners using Javascript
Article
1. Build the HTML Structure
This part will be relatively simple. Our HTML will need 1) an empty <div> at the top of the page which is what we’ll scroll back up to, 2) an anchor link, so we can link back up to the top, <a>, and 3) whatever <svg> or <img> element we want to use inside that anchor link. Here is the general structure:
<div id=""></div>
<a href="">
<img src="">
</a>
For the empty <div> that we’ll be scrolling to, I’m going to add an id value of "scroll-here" which is what we’ll use as the links href value.
For the image, I’m going to use an icon that I got from Orion Icon Library.
For the link, I’m also going to add in the href value of the link, scroll-here, to bring us back up to that div when we click on it. I’m also going give it an id attribute or back-to-top so that we can target it with CSS and Javascript.
<div id="scroll-here"></div>
<a id="back-to-top" href="#scroll-here">
<img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title' aria-describedby='desc' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EAngle Up%3C/title%3E%3Cdesc%3EA line styled icon from Orion Icon Library.%3C/desc%3E%3Cpath data-name='layer1' fill='none' stroke='%23202020' stroke-miterlimit='10' stroke-width='2' d='M20 40l11.994-14L44 40' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E" alt="Angle Up" />
</a>
We want to test this out before we make this live, so I’m going to add a new page onto my site, and add this into the page header code injection area. Once we add it in and save the changes, we should see a big up arrow at the top of our page.
2. Position the Button
To position the button we’re going to used the position: fixed property as well as a few others to position it.
#back-to-top{
height:50px;
width:50px;
position:fixed;
bottom:0;
right:0;
z-index:99;
}
At this point, our back to top button should always be positioned at the bottom right of the screen.
3. Design the Button
Now I’m going to throw on some CSS styles to make this button look a little better.
#back-to-top{
height:50px;
width:50px;
position:fixed;
bottom:0;
right:0;
z-index:99;
border-radius:50%;
box-shadow: 0px 0px 5px #ccc;
margin:17px;
background:white;
}
html{
scroll-behavior:smooth;
}
4. Style the Button when "Out of View"
Now we’re going to start our journey into javascript. The general idea here is for the button so show up after the user has done some scrolling down the page. We don’t need the back-to-top button when we’re already at the top!
The way we’re going to do this is by adding or removing an HTML to the button depending on where the user is one the page. We’ll use CSS to style the button to out of view whenever the class isn’t present, and to be in view when the class is present. So first, let’s add some additional style to our CSS about to move the button "out of view". The additional class we’ll use is "show-btt", but of course, you can use whatever you want.
#back-to-top{
height:50px;
width:50px;
position:fixed;
right:0;
z-index:99;
border-radius:50%;
box-shadow: 0px 0px 5px #ccc;
margin:17px;
background:white;
/*Position Out of View*/
bottom:-150px;
opacity:0;
transition: all .5s ease;
}
#back-to-top.show-btt{
/*Position In View*/
bottom:0;
opacity:1;
transition: all .5s ease;
}
In our HTML, if we add the class, show-btt to the <a> element, the item should show up.
5. Javascript to add/remove class
Now let’s use our Javascript to add or remove the class to the <a> element depending on the scroll position. I’ve added the javascript below with notes on each of the components to breakdown what’s happening.
You’ll need to make sure you have jQuery installed on your website for this to work. I’ve added it as the first line below, but if you already have it installed on your website you don’t need it.
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
//Function To Add Class
function showBackToTop(){
$('#back-to-top').addClass('show-btt');
}
//Function To Add Class
function hideBackToTop(){
$('#back-to-top').removeClass('show-btt');
}
//Check Scroll and Add Class
function checkScrollPos(){
if ($(this).scrollTop() >= 700) { //if scroll position is lower than 700px from the top of the screen
showBackToTop();
} else {
hideBackToTop()
}
}
// tell the browser to run the "checkScrollPos()" function just above when the user scrolls
$(window).on('scroll', function(){
checkScrollPos();
});
//Check the scroll position once when the page loads
checkScrollPos();
})
</script>
Since this is javascript, we’ll want to add this between <script></script> tags in the page header code injection area. Once we’ve verified that it’s all working, we can add all the code in the page header code injection area to the site header code injection area.
The Code
CODE UPDATE
This code was updated in July 2021. Specifically, the "Scroll Here" element was removed and just replaced with some jQuery that moved the page back to the top.
This code works better, but if you're looking for the original code, see below.
HTML
<a id="back-to-top">
<img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title' aria-describedby='desc' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EAngle Up%3C/title%3E%3Cdesc%3EA line styled icon from Orion Icon Library.%3C/desc%3E%3Cpath data-name='layer1' fill='none' stroke='%23202020' stroke-miterlimit='10' stroke-width='2' d='M20 40l11.994-14L44 40' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E" alt="Angle Up" />
</a>
CSS
html {
scroll-behavior:smooth
}
#back-to-top{
height:50px;
width:50px;
position:fixed;
right:0;
z-index:99;
border-radius:50%;
box-shadow: 0px 0px 5px #ccc;
margin:17px;
background:white;
/*Position Out of View*/
bottom:-150px;
opacity:0;
transition: all .5s ease;
}
#back-to-top.show-btt{
/*Position In View*/
bottom:0;
opacity:1;
transition: all .5s ease;
}
Javascript
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
//Function To Add Class
function showBackToTop(){
$('#back-to-top').addClass('show-btt');
}
//Function To Add Class
function hideBackToTop(){
$('#back-to-top').removeClass('show-btt');
}
//Check Scroll and Add Class
function checkScrollPos(){
if ($(this).scrollTop() >= 700) { //if scroll position is lower than 700px from the top of the screen
showBackToTop();
} else {
hideBackToTop()
}
}
// Scroll to the top when the button is clicked
$('#back-to-top').click(function(){$(window).scrollTop(0)});
// tell the browser to run the "checkScrollPos()" function just above when the user scrolls
$(window).on('scroll', function(){
checkScrollPos();
});
//Check the scroll position once when the page loads
checkScrollPos();
})
</script>
Old Code. Replaced in July 2021
HTML
<div id="scroll-here"></div>
<a id="back-to-top" href="#scroll-here">
<img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title' aria-describedby='desc' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EAngle Up%3C/title%3E%3Cdesc%3EA line styled icon from Orion Icon Library.%3C/desc%3E%3Cpath data-name='layer1' fill='none' stroke='%23202020' stroke-miterlimit='10' stroke-width='2' d='M20 40l11.994-14L44 40' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E" alt="Angle Up" />
</a>
CSS
#back-to-top{
height:50px;
width:50px;
position:fixed;
right:0;
z-index:99;
border-radius:50%;
box-shadow: 0px 0px 5px #ccc;
margin:17px;
background:white;
/*Position Out of View*/
bottom:-150px;
opacity:0;
transition: all .5s ease;
}
#back-to-top.show-btt{
/*Position In View*/
bottom:0;
opacity:1;
transition: all .5s ease;
}
Javascript
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
//Function To Add Class
function showBackToTop(){
$('#back-to-top').addClass('show-btt');
}
//Function To Add Class
function hideBackToTop(){
$('#back-to-top').removeClass('show-btt');
}
//Check Scroll and Add Class
function checkScrollPos(){
if ($(this).scrollTop() >= 700) { //if scroll position is lower than 700px from the top of the screen
showBackToTop();
} else {
hideBackToTop()
}
}
// tell the browser to run the "checkScrollPos()" function just above when the user scrolls
$(window).on('scroll', function(){
checkScrollPos();
});
//Check the scroll position once when the page loads
checkScrollPos();
})
</script>
