时间戳

首页 > 解决方案 > JQuery/Bootpag 分页没有将下一页返回到结果顶部

javascript - JQuery/Bootpag 分页没有将下一页返回到结果顶部

问题描述

我已经在我的网站上实现了 JQuery/Bootpeg 分页。它工作得很好，除了一件事：当您单击以移动到新页面时，会加载新的结果集，但页面仍位于分页按钮所在的新结果集的底部。这意味着访问者必须向上滚动到页面顶部才能向下滚动新结果，我认为这有点笨拙（我每页显示 20 个结果）。

这是我正在使用的 HTML 和 JS 编码。我还有一个 PHP 脚本，它从我的数据库中提取数据并显示它（fetchpages.php）。有什么方法可以调整代码，以便页面从新结果的顶部重新显示（页面顶部或页面上的锚点）？

$(document).ready(function() {
    $("#results").load("fetchpages.php");  //initial page number to load
    $(".pagination").bootpag({
       total: <?php echo $pages; ?>,
       page: 1,
       maxVisible: 5 
    }).on("page", function(e, num){
        e.preventDefault();
        $("#results").prepend('<div class="loading-indication"><img src="img/ajax-loader.gif" /> Loading...</div>');
        $("#results").load("fetchpages.php", {'page':num});
    });

});
<script type="text/javascript" src="scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="scripts/jquery.bootpag.min.js"></script>
<div id="results"></div>
<div class="pagination"></div>

标签： javascriptjquery

解决方案

查询：

$(窗口).scrollTop(0); // 使用它来设置页面回到顶部

$(document).ready(function() {
    $("#results").load("fetchpages.php");  //initial page number to load
    $(".pagination").bootpag({
       total: <?php echo $pages; ?>,
       page: 1,
       maxVisible: 5 
    }).on("page", function(e, num){
        e.preventDefault();
        $("#results").prepend('<div class="loading-indication"><img src="img/ajax-loader.gif" /> Loading...</div>');
        $("#results").load("fetchpages.php", {'page':num});

        $(window).scrollTop(0); // use this to set page back to top
    });

});

推荐阅读