-1

My goal is to scroll down the fixed content with any trigger (clicks) with jquery animate scrollTop. My expected result, when the button clicked the fixed content will scroll all the way down until the last row. So, this is my attempt:

// I couldn't scroll down the fixed div
$('.scroll').click(function(){
    var h = $('#content').height();
  // alert(h);
  $('#content').animate({
  scrollTop: h
  },1000);
});


// could scroll body instead
$('.scrollbody').click(function(){
    var h = $('body,html').height();
  // alert(h);
  $('body,html').animate({
  scrollTop: h
  },1000);
});

// why?
.fixed{
  position: fixed;
  overflow:hidden;
  width: 100px;
  height:200px;
  overflow-y: scroll;
  background-color:green;

overflow-x: hidden;
}

.notfixed{
 margin-left:60%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Hover and Scroll this: |______Separate____|     This is body element:

<br>
<button type="button" class="scroll">Click to scroll down this fixed</button>
 |______Separate____| 
<button type="button" class="scrollbody">Click to scroll down body</button>
<div class="fixed">
  <div id="content">
    <ul>
      <li>firstrow</li>
      <li>bbbbbbbb</li>
      <li>cccccccc</li>
      <li>dddddddd</li>
      <li>asd</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      <li>i</li>
      <li>j</li>
      <li>k</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>aaaaaaaa</li>
      <li>lastrow</li>
    </ul>
  </div>
</div>


              
              
        
<div class="notfixed">
  <ul>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>
    <li>Not Fixed</li>


  </ul>
</div>

Or, If you need jsfiddle: https://jsfiddle.net/bloodberry/1tswoam7/16/

Any help will be appreciated. Thank you

Alfian Firmansyah
  • 44
  • 8
  • Does this answer your question? [Position fixed not working in mobile browser](https://stackoverflow.com/questions/19254146/position-fixed-not-working-in-mobile-browser) – Vicky Gonsalves Aug 29 '20 at 05:02
  • @VickyGonsalves No, but g23 he did the trick :D – Alfian Firmansyah Aug 29 '20 at 05:10
  • This is not tricky at all. You could have mentioned in your question that you have other classes called `.fixed` or same name classes - not just one – Always Helping Aug 29 '20 at 05:10
  • @AlwaysHelping It's hard to tell to you, because I've faced with the dynamic data. This question was simplified of my problem in here man: https://jsfiddle.net/bloodberry/aw2pzm9e/10/ , It's difficult to migrate my work to jsfiddle when everything is dynamic, describing this complicated-dynamic codes makes me dizzy. Anyway thanks so much, your snippet also help me. – Alfian Firmansyah Aug 29 '20 at 05:34
  • All good no worries. Happy coding :) – Always Helping Aug 29 '20 at 05:36

1 Answers1

1

This was a little tricky.

It's the parent of your "#content" that is what has the scroll bar.

This should work: $("#content").parent().animate({scrollTop: 1000}, 1000)

g23
  • 666
  • 3
  • 9
  • Omg, you are my savior HAHAHA, 3 hrs I've been looking for this simple, tricky solution. You get it clearly. this worked like a charm. Is parent() calling the first parent of the element or just the previous parent?. BUUUT atleast this is worked :D thanks – Alfian Firmansyah Aug 29 '20 at 05:03
  • `.parent()` get's the parent element of the element you're selecting. `.parent().parent()` would get the parent's parent and etc. – g23 Aug 29 '20 at 05:16