如何使用 JQUERY animate scrollTop 滾動固定元素？

Question

我的目標是使用 jquery animate scrollTop 使用任何觸發器（點擊）向下滾動固定內容。 我的預期結果是，當單擊按鈕時，固定內容將一直向下滾動，直到最后一行。 所以，這是我的嘗試：

 // 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>

或者，如果您需要 jsfiddle： https ://jsfiddle.net/bloodberry/1tswoam7/16/

任何幫助將不勝感激。 謝謝

Answer 1

這有點棘手。

滾動條是“#content”的父級。

這應該有效： $("#content").parent().animate({scrollTop: 1000}, 1000)