我被另一个jQuery问题冒犯了。好吧，我从我的代码开始理解我的问题：
<script type="text/javascript">
jQuery(document).ready(function() {
var current = <?php echo ($_GET['page']!='') ? $_GET['page'] : 1; ?>;
var idp;
$(window).scroll(function(e){
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
current=current+1;
if(current<=1)
{
idp = '';
}
else
{
idp = '?page='+current;
}
loadMoreContent(idp);
history.pushState("state", "title: "+current, "index.php"+idp);
e.preventDefault();
}
if($(window).scrollTop() == 0) {
current=((current-1)<=0) ? 1 : current-1;
if(current<=1)
{
idp = '';
}
else
{
idp = '?page='+current;
}
loadMoreContent(idp);
history.pushState("state", "title: "+current, "index.php"+idp);
e.preventDefault();
}
});
window.onpopstate = function(event) {
if(current<=1)
{
idp = '';
}
else
{
idp = '?page='+current;
}
loadMoreContent(idp);
history.pushState("state", "title: "+current, "index.php"+idp);
};
function loadMoreContent(position) {
$('#loader').fadeIn('slow', function() {
$.get("index.php"+position+" #annonceis", function(data){
var dato = $(data).find("#annonceis");
$("#annonceis").html(dato);
$('#loader').fadeOut('slow', function() {
$(window).scrollTop(60);
});
});
});
}
});
</script>我的问题是基于无限滚动，但我使用了html（）函数来替换名为annonceis的div中的内容，而不是"append"。
这个想法是，当我滚动到页面底部时，我会得到一个名为index.php的新页面的内容？页码=123。并用我用jQuery获得的新内容替换de div annonceis中的旧内容，但当我滚动到底部时，我获得下一个页面的内容，例如当当前页面是index.php时？page=2通常当我滚动到底部时，我必须获得index.php的内容？page=3，但在这里我得到了index.php的内容？page=3并立即index.php？page=4所以页面显示index.php？page=4.
主要的想法是滚动到底，获得下一页的内容，而不是分页，但它必须注意历史。出于SEO目的，pushState和谷歌的建议请参阅http://scrollsample.appspot.com/items而且https://googlewebmastercentral.blogspot.com/2014/02/infinite-scroll-search-friendly.html.
事先非常感谢。
因此，您真正追求的是分页与无限滚动相结合。所提供的示例正在使用.pushState()来跟踪用户使用页面Waypoints滚动。请注意，一旦页面X到达页面的中心点，就会触发.pushState()。
其次，如果您查看示例中任何页面的源代码，您会发现它只会呈现所选页面，然后使用.scroll上的侦听器，它会根据需要附加或预处理内容。
所以，在它的核心，这实际上只是简单的分页。无限滚动的感觉只是简单地添加在用户体验的顶部。基本概述如下：
型号或控制器
您的PHP文件或其他什么文件，它运行实际的查询-基于类以便于使用。该类将包含一个函数，用于根据请求页面获取一组帖子。JavaScript将处理其他一切。
<?php
Class InfiniteScroller {
// Set some Public Vars
public $posts_per_page = 5;
public $page;
/**
* __construct function to grap our AJAX _POST data
*/
public function __construct() {
$this->page = ( isset($_POST['page']) ? $_POST['page'] : 1 );
}
/**
* Call this function with your AJAX, providing what page you want
*/
public function getPosts() {
// Calculate our offset
$offset = ($this->posts_per_page * $this->page) - $this->posts_per_page;
// Set up our Database call
$SQL = "SELECT * FROM my_post_table ORDER BY post_date ASC LIMIT " . $offset . ", " . $this->posts_per_page;
// Run Your query, format and return data
// echo $my_formatted_query_return;
}
}
?>
AJAX调用
接下来你要处理的是你的前端和JavaScript，所以你的AJAX调用可以放在一个函数中，这个函数只需调用上面的方法并接受一个页面参数。
<script type="text/javascript">
function getPageResults( page = 1, arrange = 'next' ) {
$.ajax({
url: url;
type: "POST",
data: "?page=" + page,
success: function(html) {
/* print your info */
if( arrange == 'prev' ) {
$( '#myResults' ).prepend(html);
else if( arrange == 'next' ) {
$( '#myResults' ).append(html);
}
},
error: function(e) {
/* handle your error */
}
});
}
</script>
HTML视图
你的HTML将是相当基本的，只是一个存放你显示的结果和一些创造性触发因素的地方。
<html>
<head>
</head>
<body>
<div class="loadPrev"></div>
<div id="myResults">
<!-- Your Results will show up here -->
</div>
<div class="loadNext"></div>
</body>
</html>
加载您想要的页面
总之，你的最后一块拼图是根据URL中的查询字符串加载请求的页面。如果不存在查询字符串，则需要第1页。否则，请加载请求的页面。
<script type="text/javascript">
$( document ).ready(function() {
var page = <?php echo ( isset($_GET['page'] ? $_GET['page'] : 1) ?>;
getPageResults( page, 'next' );
});
</script>
之后，您可以为上一个和下一个触发器设置一些有创意的侦听器，并根据需要调用具有所需页面的getPageResults()和next或prev属性。
这实际上可以从一个更优雅的意义上完成——从您提供的示例中查看JS：http://scrollsample.appspot.com/static/main.js
正在清理
一旦基本体系结构就绪，就可以开始更改.pushState()以及更改canonical、next和prev <link rel>头项。此外，在这一点上，你可以开始生成你需要的下一个/上一个链接，等等。一旦你奠定了基本的基础，一切都应该到位。
嘿，兄弟@LionelRitchiethManatee Finnaly我已经解决了这个问题，这就是我使用的代码。
<script type="text/javascript">
jQuery(document).ready(function() {
var current = <?php echo ($_GET['page']!='') ? $_GET['page'] : 1; ?>;
var idp;
var loaded = true;
$(window).scroll(function(e){
if(($(window).scrollTop() + $(window).height() == $(document).height())&&(loaded)) {
loaded = !loaded;
current=current+1;
if(current<=1)
{
idp = '';
}
else
{
idp = '?page='+current;
}
loadMoreContent(idp);
history.pushState("state", "title: "+current, "index.php"+idp);
e.preventDefault();
}
if($(window).scrollTop() == 0) {
loaded = !loaded;
current=((current-1)<=0) ? 1 : current-1;
if(current<=1)
{
idp = '';
}
else
{
idp = '?page='+current;
}
loadMoreContent(idp);
history.pushState("state", "title: "+current, "index.php"+idp);
e.preventDefault();
}
});
window.onpopstate = function(event) {
if(current<=1)
{
idp = '';
}
else
{
idp = '?page='+current;
}
loadMoreContent(idp);
history.pushState("state", "title: "+current, "index.php"+idp);
};
function loadMoreContent(position) {
$('#loader').fadeIn('slow', function() {
$.get("index.php"+position+" #annonceis", function(data){
var dato = $(data).find("#annonceis");
$("#annonceis").html(dato);
$('#loader').fadeOut('slow', function() {
loaded = !loaded;
$(window).scrollTop(60);
});
});
});
}
});
</script>我添加了一个名为"loaded"的新var，初始值为TRUE，当加载内容时，它将更新为FALSE状态，当我们开始滚动时，它会更新为TRUE状态。
我的解决方案很原始，不像你做的那样干净，但它解决了我的问题。
无论如何，谢谢你的帮助，你是老板。