Show 'back to top' when scrolling down 100px from the section

Question

I know how to show 'back to top' button after scrolling 100px from the top of the window, but I want to show it after scrolling down 100px (for example) from a certain section/div and I couldn't find a solution. I have a text and the images above it, the text is in one section, the images are in another, so I want the button to fade in after scrolling 100px from the section with images and to stop 100px from the end of the same section.

 $(document).ready(function() { $('.back-to-top').hide(); var scrollBottom = $(".images").height() - 100; // stop the button 100px from the end of the section $(window).scroll(function() { if ($(".images").scrollTop() > 100) { $('.back-to-top').show().fadeIn(); } else { $('.back-to-top').fadeOut().hide(); } }); });

 #images div { width: 100%; height: 300px; background: #d35276; } #images div:nth-child(odd) { background: #f1e264; }.back-to-top { padding: 20px; display: inline-block; text-decoration: none; background-color: #FFF; color: #000; border-radius: 50px; position: absolute; right: 50px; bottom: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="top"></div> <section id="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit enim ut leo pulvinar, ut viverra felis pharetra. Donec tincidunt orci sit amet consequat porttitor. Pellentesque vitae varius risus. Quisque iaculis vel purus vitae euismod. Pellentesque tincidunt justo eu nibh euismod fringilla. Integer iaculis tellus eget egestas faucibus. Aliquam at mi non leo luctus sodales ac eu ipsum. Curabitur id leo risus. Sed porttitor nec tellus non volutpat. Phasellus nec ornare ante, nec sodales quam. Donec a lectus semper, viverra metus eget, consectetur odio. Nulla scelerisque elit a arcu consequat lobortis. Donec non ipsum felis. Maecenas sem dolor, egestas a placerat fermentum, finibus vel mi. Etiam pretium orci eu nunc elementum, id rutrum tellus convallis.</p> </section> <section id="images"> <div></div> <div></div> <div></div> <div></div> <div></div> </section> <a href="#top" class="back-to-top">&uarr;</a>

Answer 1

The undefined behavior occurs because you select the wrong item and use the scrollTop() method. You will see that the problem is solved when you use the scrollTop() method on the window object. Also, I assigned a fixed value to the position style inside the .back-to-top class style.

 $(document).ready(function() { $('.back-to-top').hide(); $(window).scroll(function() { console.clear(); console.log(`Scroll: ${$(this).scrollTop()}`); if ($(this).scrollTop() > 100) /* edited */ $('.back-to-top').show().fadeIn(); else $('.back-to-top').fadeOut().hide(); }); });

 #images div { width: 100%; height: 300px; background: #d35276; } #images div:nth-child(odd) { background: #f1e264; }.back-to-top { position: fixed; /* edited */ padding: 20px; display: inline-block; text-decoration: none; background-color: #FFF; color: #000; border-radius: 50px; right: 50px; bottom: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="top"></div> <section id="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit enim ut leo pulvinar, ut viverra felis pharetra. Donec tincidunt orci sit amet consequat porttitor. Pellentesque vitae varius risus. Quisque iaculis vel purus vitae euismod. Pellentesque tincidunt justo eu nibh euismod fringilla. Integer iaculis tellus eget egestas faucibus. Aliquam at mi non leo luctus sodales ac eu ipsum. Curabitur id leo risus. Sed porttitor nec tellus non volutpat. Phasellus nec ornare ante, nec sodales quam. Donec a lectus semper, viverra metus eget, consectetur odio. Nulla scelerisque elit a arcu consequat lobortis. Donec non ipsum felis. Maecenas sem dolor, egestas a placerat fermentum, finibus vel mi. Etiam pretium orci eu nunc elementum, id rutrum tellus convallis.</p> </section> <section id="images"> <div></div> <div></div> <div></div> <div></div> <div></div> </section> <a href="#top" class="back-to-top">&uarr;</a>

Answer 2

First you must make a button position fixed in CSS to appear when you scroll in a full page like this:

.back-to-top {
    position: fixed;
    right: 50px;
    bottom: 50px;
    padding: 20px;
    display: inline-block;
    text-decoration: none;
    background-color: #FFF;
    color: #000;
    border-radius: 50px;
  }

and In jquery use just fadeIn or fadeOut not fadeOut().hide() and to animate it use fadeIn(milliSeconds)

Jquery code will be like this:

$(document).ready(function() {

    console.log('Started')

    $('.back-to-top').hide();
  
    $(window).scroll(function() {
      if ($(document).scrollTop() > 100) {
        $('.back-to-top').fadeIn(1000);
        console.log('More Than 100')
      } else {
        $('.back-to-top').fadeOut(1000);
      }
    });
  });