Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


7TK

Question

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!¬†ūüôā

 

 

Link to comment

5 answers to this question

Recommended Posts

  • 1

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>

Edited by derricksrandomviews
Link to comment
  • 0

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!

Link to comment
  • 0
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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

√ó
√ó
  • Create New...