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

【问题标题】：How to scroll fixed element with JQUERY animate scrollTop?如何使用 JQUERY animate scrollTop 滚动固定元素？
【发布时间】：2020-08-29 04:40:18
【问题描述】：

我的目标是使用 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/

任何帮助将不胜感激。谢谢

【问题讨论】：

这能回答你的问题吗？ Position fixed not working in mobile browser
@VickyGonsalves 不，但是 g23 他做到了：D
这一点都不棘手。您可以在问题中提到您有其他名为 .fixed 的类或同名类 - 不仅仅是一个
@AlwaysHelping 很难告诉你，因为我遇到过动态数据。这个问题在这里简化了我的问题：jsfiddle.net/bloodberry/aw2pzm9e/10，当一切都是动态的时，很难将我的工作迁移到 jsfiddle，描述这种复杂的动态代码让我头晕目眩。无论如何，非常感谢，你的 sn-p 也帮助了我。
一切都好，不用担心。快乐编码:)

标签： javascript html jquery css jquery-ui

【解决方案1】：

这有点棘手。

滚动条是“#content”的父级。

这应该可以：$("#content").parent().animate({scrollTop: 1000}, 1000)

【讨论】：

天哪，你是我的救星哈哈哈，3 小时我一直在寻找这个简单而棘手的解决方案。你明白了。这就像一个魅力。 parent() 是调用元素的第一个父级还是仅调用前一个父级？ BUUUT 至少这是有效的：D 谢谢
.parent() 获取您选择的元素的父元素。 .parent().parent() 会得到父母的父母等等。