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);
});

注意: 这完全未经测试，可能会使页面有点跳跃