我怎样才能防止滚动到页面顶部点击加载更多按钮

Question

我有一个虽然恼人的小困难。 我有一个按钮，点击时会加载更多的数据，但每次单击按钮时，它都会滚动到页面的顶部。 我如何保留这个位置，然后在下面添加更多数据。

<button class="btn btn-primary btn-block" id="loadMore" onclick="loadstuff(); return false;">Load More Results</button> 

$("#loadMore").click(function (e) { 
    e.preventDefault();  
    $("#insert_data").append(divhtml); 
}); 

我有一个jquery调用，一次抓取数据库中的数据10项。 我试过e.preventDefault（）;以及返回虚假;但仍然无法工作。 在此先感谢！

Answer 1

试试这样说：

divhtml ="Test Test Test" 
 

 
divhtml2 ="Test2 Test2 Test2" 
 
function loadstuff(event){ 
 
    event.preventDefault() 
 
    $("#insert_data").append(divhtml); 
 
} 
 

 
function loadstuff2(event){ 
 
    
 
    $("#insert_data").append(divhtml2); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect.Some Text to make some space, to see the "not scrolling up" effect. 
 

 
<a href="#" class="btn btn-primary btn-block" id="loadMore" onclick="loadstuff(event)">Load More Results</a> 
 

 
<a href="#" class="btn btn-primary btn-block" id="loadMore" onclick="loadstuff2(event)">Load More Results 2</a> 
 

 
<span id="insert_data"></span>

你需要传递变量event在onclick - >它传递给JS函数，然后event.prevent...。你也有一个奇怪的扭曲，当你给一个元素的属性onclick a $("#loadMore").click(...没有任何意义。您只需在JS中编写loadstuff()函数，它将通过onclick属性触发。

我做了两个按钮，所以你可以看到不同之处。有和没有event.preventDefault()。我用<a>标签，但它与按钮相同;）

希望帮助，如果不发表评论。