如何使用 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)

如何使用 JQUERY animate scrollTop 滚动固定元素？

How to scroll fixed element with JQUERY animate scrollTop?

html

javascript

css

jquery

jquery-ui