javascript - 防止div在上面加载数据后跳下Jquery

Question

如何防止Post容器在将数据加载到ThreadsContainer后跳下？我希望它保持固定在顶部。

    $('.Loadthreads').on("click",function () {
	     $('.threatsContainer').append("<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem");
       });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="threatsContainer"></div>
    <div class="Loadthreads" style="cursor:pointer;">[Load Threads]</a>
    <div class="Post" style="background:red;">[I want to maintain fixed at the top after the data above has loaded]</div>

当您访问某个主题的评论页面时，Twitter 上会使用此技术。评论保持稳定，而线程加载在其上方。无需移动它。

我正在考虑使用 scroll:overflow,visble 但什么都没有......我不想使用固定定位。

Answer 1

    $('.Loadthreads').on("click",function () {
	     $('.threatsContainer').append("<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem");
         $('html, body').animate({scrollTop: $(".Post").offset().top}, 0);
       });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="threatsContainer"></div>
    <div class="Loadthreads" style="cursor:pointer;">[Load Threads]</a>
<div class="Post" style="background:red;">[I want to maintain fixed at the top after the data above has loaded]</div>
    </div>

您可以做的是使用 jQuery 加载上面的数据后滚动到 .Post div。希望能帮到你。