How To Create a Floating Back-to-Top Button


Update: This code has been completely transformed on May 24, 2019 in order to work with more browsers and with more Squarespace templates. Please let me know if you run into any issues.


I was chatting with a few fellow Squarespace designers a couple of weeks ago, and we were discussing how to add Back-to-Top buttons to Squarespace websites.

Some templates provide this feature straight out of the box, but many templates (including Brine) do not.

You’ve probably seen Back-to-Top buttons around the web. They’re buttons that often show up on the bottom right-hand of your browser when you’re scrolling down a long page of content.

 In the bottom-right corner, there's a back-to-top button! Go to smashingmagazine.com to see it in action. In the bottom-right corner, there’s a back-to-top button! Go to smashingmagazine.com to see it in action.

These buttons give your reader a way to quickly scroll back up to the top of the page (which then allows them to click on another link in your menu).

Given how popular long-form content is, you may just find yourself wanting to add a Back-to-Top button to your Squarespace website. And if you’re not using one of the templates with this feature built-in, you’re going to need to add custom code.

Luckily, I have the code to help you add a back-to-top button to your Squarespace website today!

 How to Create a Floating Back-to-Top Button in Squarespace

A Few Guidelines for Back-to-Top Buttons

Before I give you the code, let’s take a minute to cover the best way to offer your readers a great experience using back-to-top buttons.

  1. Use back-to-top buttons on long pages. Short pages don’t need them.

  2. Ideally, set up your back-to-top button to show up on the bottom-right corner of your website. That’s where your readers will generally expect to find it.

  3. Have your back-to-top button fade in as your readers scroll down the page rather than having it show up from the very beginning.

If you want to read more on how to make the most of back-to-top button design, check out the Nielsen Norman Group article covering Back-to-Top Button Design Guidelines.

Alright, on to the code!

Code for Floating Back-to-Top Button


Note: You’ll need a Business plan or higher in order to inject this code onto your site.


Β 

Add code!

For each page that you want to add a back-to-top button, you’ll need to add the following code (Page Settings > Advanced > Page Header Code Injection).

Alternatively, you can also choose to place this code just once under Settings > Advanced > Code Injection > Footer, but then the Back-to-Top button will show up on every page of your website.

Version 1 – Square with Text

 A black square with the word

Here’s the code:

<!-- Styles your button (this is a black square with white text) -->
<style>
  .back-to-top {
    background-color: #000000;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 0%;
  }

  a.back-to-top {
    font-weight: 1000;
    letter-spacing: 2px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 14px;
  }

  .back-to-top:hover, .back-to-top:focus, .back-to-top:visited {
    color: #FFFFFF;
  }

  .back-to-top.show {
    opacity: 1;
  }
</style>

<!-- Adds the back to top link to your website -->
<a href="#" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>

<!-- Fades in the button when you scroll down -->
<script>
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

  window.addEventListener('scroll', function(e) {
      if ( window.pageYOffset > amountScrolled ) {
          link.className += ' show';
      } else {
          link.className = 'back-to-top';
      }
  });
<!-- Scrolls to Top --> link.addEventListener('click', function(e) { e.preventDefault(); var distance = 0 - window.pageYOffset; var increments = distance/(500/16); function animateScroll() { window.scrollBy(0, increments); if (window.pageYOffset <= document.body.offsetTop) { clearInterval(runAnimation); } }; // Loop the animation function var runAnimation = setInterval(animateScroll, 16); }); </script>

Version 2 – Circle with Text

 A black circle with the word

Only one small change is needed to change the square into a circle. To do that, change

border-radius: 0%;

to

border-radius: 50%;

Version 3 – Image

 An image of a black square with a white arrow inside of it sits in the bottom-right corner of a long-scrolling page.

You’ll need to create an image for this version (or use the one I created below). Once you’ve created your image, take note of the width and height of your image. You’ll need that to change the code.

Click to download!


For your choice of 15 custom back-to-top images, check out this freebie: Custom Back-to-Top Buttons.

If you want more freebies like this, sign up for my newsletter. I offer extra resources and coding snippets to my readers every week.


The image that I’m providing today is 50×50 pixels.

Once you have your image, you’ll need to upload it to your website under Design > Custom CSS > Manage Custom Files. You can then click on the image to paste the URL into your Custom CSS. Copy the URL and then delete it from your Custom CSS section (leave it in Manage Custom Files).

Pay special attention to the code below. I added a couple of extra comments to walk you through how to use this code with your own image.

<!-- Styles your button (this is a 100x100 pixels image) -->
<style>
.back-to-top {
    /* Remove the background color */
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
  
    /* Change the width and height to match your image dimensions */
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 0%;
}
  
  .back-to-top.show {
       opacity: 1;
  }
</style>

<!-- Adds the back to top link to your website. Replaces the text with an image of your choosing. Add your own image url where it says ADD URL HERE. -->
<a href="#" id="back-to-top" class="back-to-top" style="display: inline;"><img src="ADD URL HERE" ></a>
<!-- Fades in the button when you scroll down --> <script> var link = document.getElementById("back-to-top"); var amountScrolled = 250; window.addEventListener('scroll', function(e) { if ( window.pageYOffset > amountScrolled ) { link.className += ' show'; } else { link.className = 'back-to-top'; } });
<!-- Scroll to Top --> link.addEventListener('click', function(e) { e.preventDefault(); var distance = 0 - window.pageYOffset; var increments = distance/(500/16); function animateScroll() { window.scrollBy(0, increments); if (window.pageYOffset <= document.body.offsetTop) { clearInterval(runAnimation); } }; // Loop the animation function var runAnimation = setInterval(animateScroll, 16); }); </script>

Back-to-Top Buttons are Great For Your Readers

Even if your Squarespace template doesn’t have built-in support for Back-to-Top buttons, you can still add them with some custom code. Play around with the colors or create your own image to match your brand!


If you find yourself stuck at any point, leave a comment and I’ll help you out.


Comments (50)

Leave a Comment

Your email address will not be published. Required fields are marked *

  1. Hi Heather, this is great! Is there a way I can get it to move to the bottom left side of my screen instead of the bottom right? I already have a chat floating button on the right so I’d like to move your Back to Top button on the left side of the screen if possible.

  2. Hi, thanks so much for this!

    Would it be possible to get the button to fade out once it reaches a particular point on the page? I’m using it as a floating button to link to another page on the site.

  3. Hi Heather – thanks, this works great!
    Is there any way the font can be changed to match a custom font in the website?

  4. Hey Heather, thanks so much for thisβ€”it’s really helpful! I was wondering how I could change the action so that when the button is clicked, it visibly scrolls back up to the top, rather than just appearing at the top of the screen instantly.

    You can see an example of what I mean in regards to the animated scroll up on this person’s website lottanieminen.com/graphicdesign/maisonette as opposed to what I currently have on mine.

    1. I just updated the code to work with more templates. Check it out and let me know if you run into any issues.

  5. Never mind! Please ignore my question about a dark bar. It’s unrelated to your code. Your code is awesome! Thank you!

  6. Hi. Thank you for this code! It’s working, but on mobile, a dark grey bar is appearing across the bottom of the screen when I scroll. Do you know what’s causing this? Thanks!

    1. Quite possibly! This code was made with Brine in mind, but I’ll take a look and see if I can get it working on templates like Wexley.

  7. Hi! Everything is working as planned except the color of the word “TOP” won’t change colors. Not sure what to do πŸ™

    1. I added some extra code to my snippet since I think a few others have run into similar issues. There may be some styling conflicts with other links on your website. Try

      .back-to-top:hover, .back-to-top:focus {    
          color: #FFFFFF;
      }

      If that doesn’t work, send me an email or leave a link here.

  8. Button isn’t working for me unfortunately. Sometimes the writing doesn’t appear unless I hover it, sometimes it’s visible. Also the button isn’t taking me to the top of the page, it either doesn’t work or takes me to the middle. Otherwise it looks really good. What should I do?

  9. Hello-

    Thank you so much, this works flawlessly! One question I did have is: If I wanted the button to fade in a bit further down the page, what code would I need to change in order to make that happen?

    Thanks again!

        1. I actually did have another question if you don’t mind. No matter what I do, it seems to always change the text color back to black. I am able to change the button background color with no problems, but, for some reason, not the text color. Any insight? Thanks!

          1. Oooh, that’s an odd one if it’s only happening on PC. Would you mind sending me a link? You can leave it here or send it by email (heather@heathertovey.com) and I’ll check it out.

          2. I’m not sure why it would only be happening on particular browsers (except that different browsers do weird things), but try this:

            .back-to-top:visited {
            color: #FFFFFF;
            }

            It looks like you have some code that changes all links that have been clicked to black. This should overwrite it.

  10. Hi Heather, Thanks for the code. Doesn’t seem to work for me though. The Button appears fine but nothing happens when I click on it… Also I need to use it on other Page that I have set up as Gallery and doesn’t seem to work on these, no button shows… Any idea?

  11. I would like a button that takes you to a different place on the page – I have built a long shopping page – and the items are at the bottom. Could this be tweaked to do that task

    1. Yep! If you used multiple index sections to build out your long page, you can use the following:

      Skip Step 1. And modify the code in Step 2.

      Where it says:
      <!– Adds the back to top link to your website –>
      <a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>

      Change the #top to the #section-name. This will be whatever URL Slug you chose for the particular index section. If you didn’t use an index page, this is still possible but a little more complicated. Let me know if you need some visuals to go with this. πŸ™‚

  12. Thank you! I would love to do something exactly like this with a floating "donate today" button at the bottom of the screen. What would I need to change?

    1. Do you want your donate today button to link to a specific donate page on your website? If so, skip Step 1, and modify Step 2.

      Where it says:
      <!– Adds the back to top link to your website –>
      <a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>

      Change the #top to the URL for the page you want to link to. Let me know if this doesn’t work for your particular setup.

      1. Hi Heather, this has been absolutely incredible. I can’t say THANK YOU enough!

        I changed out the #top text with a different target link, but it still is just moving to the top of the page. Do I maybe need to change the id or class or style?

        Let me know!

        1. It sounds like you may be using the old code instead of the current version (current version works with more templates and in more situations). The current version only scrolls back to the top, but the old code should take you to wherever that anchor is. Can you add a link here or send it to me at heather@heathertovey.com so I can see which code you’re using?

  13. Hi Heather, this is exactly what I was looking for. Thank you! One question… when I tap the floating "TOP" button, it successfully brings users to the top of the page, but then the text disappears in the button thereafter. Did I do something wrong?

    1. Hmm. Sometimes Squarespace makes changes or other CSS may conflict with the settings here. Do you have a link of where you’re seeing this issue? I’d be happy to take a look and see what the problem might be.

        1. Looks like you have some conflicting CSS on your site. When you hover or focus on a link, it turns the text black. That’s why it looks like it’s disappearing permanently. The link stays focused until you click elsewhere on focus. To fix it, use this CSS:

          .back-to-top:hover, .back-to-top:focus {
          color: #FFFFFF;
          }

          This should overwrite the code that you have on the rest of your links so that the back-to-top button stays white.

          1. Wow, that was like magic. Thank you so much. I’m a marketing consultant and two of my clients use Squarespace and it drives me crazy sometimes. My website is nerdysmb.com. I’ll bookmark your site and maybe we can collaborate on a few paid projects in the future. Thanks again, Heather!

  14. Love this! Just what I was looking for! Thank you so much! I was wondering if theres any way to make additional ones that appear below it that link to social media? Thanks again!

    1. It is sort of working for me. Looks like the opacity isn’t working. I don’t see the button, but I can hover over the area and my mouse detects it.
      When I delete that line of code (opacity: 0;), it shows up, just not only at the bottom. Any help Heather?