jquery / css - Error with detecting <div>'s scroll down

Question

Here I made a scrollable <div> with a scroll down button, which is intended to disappear when <div> reaches the bottom.

<h1>header</h1>
<hr>
<div style="position: relative; height:75%">
<div class="utt" style="overflow: auto; height:100%">
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p>
</div> 
<center><a id="appear" class="toBottom" onclick="scroll" style="position: absolute; bottom: 40px; right: 40px; border-radius: 5px;"><button style="border-radius: 3px"><b>scroll<br>down</b></button></a></center>     
</div>
<hr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function scroll() {
  $(".toBottom").click(function scroll() {
  let elm = $(".utt")
    elm.animate({
      scrollTop: elm[0].scrollHeight
    }, 500);
  });
});
        
$(".utt").scroll(function() {
    if($(this).scrollTop() + $(this).innerHeight() > $(this)[0].scrollHeight) {
        $(".toBottom").hide(120);    
    } else {
        $(".toBottom").show(120);
    }
});
</script>

Now here's an error: the feature which makes the button disappear works in some screen resolutions, and not in others. For example, it works in a full-sized desktop browser but not in mobile browser or minimized(smaller) desktop browser. How can I make this work in all cases?

Answer 1

With the code you pasted the element utt isn't scrolling at all, the scroll happens in the body . You need to give utt a fixed height for the scroll to appear or apply the jquery scroll function to the $(window) :

 <h1>header</h1> <hr> <div style="position: relative; height:75%"> <div class="utt" style="overflow: auto; height:40vh"> <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> <p>a</p><p>a</p> </div> <center><a id="appear" class="toBottom" onclick="scroll" style="position: absolute; bottom: 40px; right: 40px; border-radius: 5px;"><button style="border-radius: 3px"><b>scroll<br>down</b></button></a></center> </div> <hr> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $(".toBottom").click(function scroll() { let elm = $(".utt") elm.animate({ scrollTop: elm[0].scrollHeight }, 500); }); $(".utt").scroll(function() { if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { $(".toBottom").hide(120); } else { $(".toBottom").show(120); } }); }); </script>