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 - ＆gt;中传递变量onclick将它传递给JS函数，然后传递给event.prevent...。你也有一个奇怪的转折，当你给一个元素onclick时，$("#loadMore").click(...没有任何意义。您只需在JS中编写loadstuff()函数，它将通过onclick属性触发。

我做了两个按钮，你可以看到差异。有无event.preventDefault()。我使用了<a>标签，但它与按钮相同;）

希望如果不发表评论会有所帮助。

如何在单击“加载更多”按钮时阻止滚动到页面顶部

1 个答案: