How do I delay the appearance of a back-to-top button?

Site URL: http://frjohnharvey.com

Hello,

I'd be grateful if someone could please guide me on how to delay the appearance of my back-to-top button.

I don't want the button to appear in the first frame of a page, but only when someone starts to scroll down that page.

(I'm on a personal plan.)

Thank you in advance! 🙂

 

You can use this code in place of what you have but try it out on one page first. It worked on my 7.1 lab site. It requires a markdown block on any page you want it to work with. Don't put it in the footer of a page. It won't work there. 

<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.show {
       opacity: 1;
  }
</style>

<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>

<script>
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

function addClass(el, className) {

    if (el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }

}

function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');    
}
  
window.addEventListener('scroll', function(e) {
     if ( window.scrollY > amountScrolled ) {
         addClass(link, 'show');
     } else {
         removeClass(link, 'show');
     }
 });
</script>

Wow!  Thanks, Derrick - that worked perfectly! 😀👍 I'll add it to a few more pages on my site and will probably tweak it a little to fit my theme (colour, opacity)...

I'm very, very grateful!

On 11/7/2021 at 5:43 PM, derricksrandomviews said:

You can use this code in place of what you have but try it out on one page first. It worked on my 7.1 lab site. It requires a markdown block on any page you want it to work with. Don't put it in the footer of a page. It won't work there. 

<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.show {
       opacity: 1;
  }
</style>

<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>

<script>
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

function addClass(el, className) {

    if (el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }

}

function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');    
}
  
window.addEventListener('scroll', function(e) {
     if ( window.scrollY > amountScrolled ) {
         addClass(link, 'show');
     } else {
         removeClass(link, 'show');
     }
 });
</script>

Hello!  This code is super helpful however I'm having an issue with it working when pressed a second time on the same page without refreshing.  If I scroll down, click back up, and scroll down again, the button doesn't work. I copied and pasted your code exactly (no customizing yet) into the custom code settings block of a project so it would also work in the contained pages.  Any suggestions to fix that (make it reusable without refreshing) would be super helpful!  Thanks in advance.

SRO, what it the website address where this is happening? Another back to top code snippet may work out instead of the one you are using. I would need to check out the one on your site first. 

Hi Derrick- I actually figured it out with a css/java script code found here:

https://www.will-myers.com/articles/building-a-back-to-top-button-in-squarespace

I appreciate your reply! I've posted a few questions in this forum, and you are the first to offer help.