How to scroll fixed element with JQUERY animate scrollTop?

Question

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

Answer 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)