当用户单击按钮时,将从 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>
最佳答案
一个想法是使用 .scrollTop()在加载事件回调中,例如:
var scrollTop = $(window).scrollTop();
$('.more_videos').load("/more_videos/"+counter, function () {
$('html body').scrollTop(scrollTop);
});
注意: 这完全未经测试,可能会使页面有点跳跃
关于javascript - 如何使用jquery防止页面跳到底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13982892/