防止div在其上加载数据后跳下

Question

How do I prevent the Post container jumps down after loading data into ThreadsContainer ? I want it to maintain fixed to the top.

  $('.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> 

This technique is used on Twitter, when you visit the page of a comment of a thread. the comment remains steady up, while the threads load above it. without moving it.

I was thinking using scroll:overflow,visble but nothing...I dont want to use fixed positionning.

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> 

What you can do is scroll to the .Post div after loading the data above it using jQuery. Hope will help you.