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.

*Requires a Business or above account to add JavaScript code snippets.*


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.classList.add('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.classList.add('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 (89)

Leave a Comment

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

  1. Hi Heather. First of all, thank you so much for sharing this. I tested out Versions 1 and 2 to wondrous results! However, I ran into a bit of an issue with Version 3. Although I uploaded one of the freebie images, copied and removed the link from the CSS panel, and inserted all of the correct code into the page header, the image showed up as just a white box. To be clear, the functionality worked appropriately, however, the image itself did not show up. As I scrolled down the page, I only saw a white box both in dev and on the live site. Have you run into this issue, and do you think you could give me a quick pointer on where I’m having trouble? Thanks again!

    1. Hey there! I went ahead and tested the code again on 7.0 and 7.1 just to make sure and everything seems to be working as normal. It’s possible there’s a code conflict on the page that you’re trying to add it. Would you mind creating a test page with the code on it and linking it to me? (Feel free to send the link by email if you’d prefer). I’m happy to troubleshoot it to see what’s going on.

  2. Thank you Heather, this is just what I was looking for. I am new to code. Can you advise me on how to make the button transparent? I love the fade-in effect, but when it’s fully visible i’d love it to be see-through…thx!

  3. Thanks a million!!!! I was looking specifically how to add my own image, not one from font awesome. Thanks for putting this together. Now can you tell me how to hide it on mobile?

  4. Thank you so much for making this SO EASY. I looked around the internet and tried other ways for an hour before finding your article. I’m so happy with the result, and really appreciate your help. Thank you!

  5. The other places I looked for adding in this bit of code just seemed so complicated. Your info was so easy to understand, and works exactly as described. Thank you so much.

    1. I totally agree with Andy!! Thanks for this easy addition to my site. Would love to be able to remove the button from the short pages and my Contact page. Is that possible? If not, I love the way it works!

  6. So I am a total noob when it comes to this stuff. I would love to use one of your custom buttons. I figured out how to use one of the standard buttons in this article and that works great. (I even customized the color, yay me!) If I want to use one of the custom ones, how on earth do I find/create the code for it? I already downloaded them.

    1. There are instructions specifically for those on that page (same as this page, but image dimensions may be different). Were those instructions not working?

  7. Hi Heather,

    First of all, you are awesome! Your code worked perfectly! However, I have some other code that underlines my links so it’s easier to spot them among text and I think it’s causing “Top” to be underlined on my button, which isn’t a huge deal, but I don’t love it. Do you know how I could fix that?

    Thanks a bunch!

    Also, I apologize if this has already been asked. I skimmed the comments, but there’s a lot so I may have missed a previous answer.

    1. Hi Lauren, I used this code to remove the underline:
      “text-decoration: none;”
      which I added to the “a.back-to-top” section like so:
      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;
      text-decoration: none;
      }
      Hope that’s helpful for you! πŸ˜€

  8. Hi Heather

    First up – you are amazing! Thank you for this incredible resource. Second, I am super struggling to get the button to go down the page instead of up! I am using Squarespace 7.1 though … it doesn’t seem to have index pages anymore?? I have tried changing the #top as you have recommended below, but that doesn’t seem to work… Can you help me? Thanks!!

    1. Hey there! This code is only for back-to-top. I edited it some time ago to add smooth scrolling for every template and the downside is that you can no longer link to anywhere on the page.

      To link to somewhere else on the page instead, you’ll need to edit the code to get rid of the code under <!-- Scroll to Top -->. Then, you’ll want to change # in the button to link to where you want it to go on the page. If you’re using 7.1 you will likely need to create a code block in the section you want to link to, and link to that code. For example, in the section you want, add a code block with the following:

      <span id="welcome"></span>

      Then you could link to it in the back-to-top button by changing # to #welcome.

      I haven’t tested this on 7.1 but I can’t think of anything that would cause a problem. Try it out or let me know if you have questions. Smooth scrolling likely won’t work. I’ll write a separate tutorial for this soon. It’s a common question and isn’t really handled by the code I have in this article. πŸ™‚

      1. You are amazing! Thank you for your help!

        I ended up switching back to an older Squarespace template – 7.1 was making my brain explode.

        Oh! And by creating an anchor link, the scroll was still smooth πŸ™‚

        Thanks!

  9. Thanks so much for the incredibly useful post, Heather! This helped me over a year ago create a “schedule now” button across all the pages of my site so there would be a call to action everywhere.

    Since the code injection applies to all pages, is there a way to have the link (I’m having the button link to an external website rather than go to the top of the page) go to a completely different external link for just one page?

    I tried pasting the code the one specific page in question but while the name of the button changed as intended, the button still takes you to the original link instead of the new one. Is there a workaround?

    1. In the same place that you have the script for scrolling down the page (after you added the link that shows up on all pages), you can add the following:

      if (document.querySelector("#collection-56d5f47de707eb99c72908c8")) { 
        	document.querySelector("#back-to-top").href = "https://example.com";
        }

      Replace the collection id in this code with the one for your particular page. If you need help finding that id, I have created a small tool to help with that: https://heathertovey.com/squarespace-id-finder/

      1. Thank you so much, Heather! That worked. Really appreciate the help. Is there a way to make the button for the page with the exception display different text?

  10. How do I change it to scroll further down before it shows the icon? Is it
    ‘var amountScrolled’ and if so, what is the unit of measurement (i.e. what does 250 represent)?

    Thanks.

  11. Hey man! this was SO helpful! I just have question. Is there a way to remove teh fade so it’s always visible. I want the logo to always be at the bottom right all the time. i tried changing this bit

    var link = document.getElementById(“back-to-top”);
    var amountScrolled = 0;

    so the amountscrolled is and that kinda helps it but it still requires the slightest scroll.

      1. You can remove opacity: 0; from the .back-to-top CSS and it should do what you want. No fading. You can then remove the entire first section of the script that handles the fading in.

          var link = document.getElementById("back-to-top");
          var amountScrolled = 250;
        
          window.addEventListener('scroll', function(e) {
              if ( window.pageYOffset > amountScrolled ) {
                  link.classList.add('show');
              } else {
                  link.className = 'back-to-top';
              }
          });
  12. Heather, thanks so much for taking the time to write out this tutorial and for answering people’s questions. Is there a way to create this button so it only appears on mobile, but not tablet or desktop? Thankuuuuu!

    1. Yes. You can use a media query. Take all the CSS that’s currently inside the opening and closing style tags and wrap it with this:

      @media screen and (max-width: 640px) {
        /* CSS code goes here */
      }
  13. This is awesome! Thanks so much. I am the opposite of a coder… so I appreciate your help. Two question, is there a way to make the icon smaller? It’s quite large on mobile? Also, any way to easily make it say “scroll to top”?

  14. Hi,
    Am sorry but this code of yours is kinda messed up. Could you please indicate where the code is going on the header, footer or Custom CSS.
    It isn’t functioning and that’s disappointing.

    Please update because this info is valuable and helpful, but it hasn’t worked for me. It’s too confusing.

    1. Could you clarify where you’re having trouble? I’ve already provided these instructions in the tutorial right above the code.

      For your convenience, I’ll copy/paste it here:

      “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.”

  15. Hey Heather,

    I’m using a template that doesn’t allow me to specify location of the code e.g. header or footer and has this message above a box for pasting in code: “This area will allow you to inject custom CSS rules into your site.”

    If I copy and paste your code, it throws this error: Syntax Error On Line 1 .

    Does it need anything else?

    Thank you!
    Anna

    1. It sounds like you’re looking in the wrong place in your template. Make sure to go to Settings > Advanced > Code Injection, not Design > Custom CSS.

  16. 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.

  17. 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.

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

  19. 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.

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

  21. 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.

  22. 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.

  23. 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?

  24. 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.

  25. 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?

  26. 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. πŸ™‚

  27. 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?

  28. 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!

  29. 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?