javascript - 如何使用jquery防止页面进入底部？

Question

当用户点击按钮时，新内容会从 javascript 中加载。但是，页面会自动转到底部。如何让页面保持原位，以便用户可以滚动到底部然后单击按钮（在他们看到加载的新内容之后）？

javascript:

<script type="text/javascript">
   $(document).ready(function() {
      counter = {{page}};
      counter = counter-1;
       $("#load_more_videos").submit(function(event){
       event.preventDefault();
       console.log(counter);
        $('.more_videos').load("/more_videos/"+counter);

       })
    });
</script>

html:

<form class="form-horizontal" method='get' action = '' id = 'load_more_videos'>
        {% csrf_token %}
        <input type='submit' class="btn btn-primary" value='Get more videos'/>
    </form>

<div class = 'more_videos'> </div>

Answer 1

一种想法是在加载事件回调中使用.scrollTop() ，例如：

var scrollTop = $(window).scrollTop();

$('.more_videos').load("/more_videos/"+counter, function () {
    $('html body').scrollTop(scrollTop);
});

笔记： This is completely untest and might make the page a little jumpy