Question

对于我的项目，我希望能够点击后退按钮并返回到我最后一页的位置。首先，发生了什么？用户位于搜索页面上，每次访问页面底部时都会加载50个结果。

发生了什么事：我有一个首先显示50个结果的搜索页面，然后当用户到达页面底部时通过ajax调用加载接下来的50个结果。

问题：当用户返回浏览器时，用户希望被定位在他们最后停止的页面上。

我正在尝试做什么：

首先，

$(window).on('beforeunload', function () {
    var lastScrollPosition = $(window).scrollTop() + $(window).height();
    document.cookie = "lastPageLoadCount=" + lastPageLoadCount + ";";
    document.cookie = "lastScrollPosition=" + lastScrollPosition + ";";
    //$(window).scrollTop(0);
});

当用户离开搜索页面时，我会在页面上保留其位置的cookie以及触发ajax的次数。我认为在转到下一页之前滚动到顶部是有意义的，但这似乎给了我一个不正确的滚动位置。

当用户点击返回以返回搜索结果时，我想阅读这些cookie并执行必要的操作以恢复页面。如果用户之前曾两次触发ajax，那么我想在尝试向下滚动到位之前自动再次执行此操作。

var lastPageLoadCount = 0;

$(document).ready(function () {

    var prevLastPageLoadCount = getCookie("lastPageLoadCount");
    if (prevLastPageLoadCount != '') {

        // below is where the problem starts

        while (lastPageLoadCount < parseInt(prevLastPageLoadCount)) {
            // manually triggering the ajax call here
            loadMoreResults(); // increment lastPageLoadCount when ajax returns success

        }
        // then scroll down into position
        // ...

        // then delete this cookie
        document.cookie = "lastPageLoadCount=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
    }

这不完全正确。似乎在页面准备好之前，循环被击中，这没有任何意义。 while循环可能被无休止地调用，而ajax似乎没有启动。我有足够的经验来判断setinterval，settimeout或callbacks是否会以某种方式帮助我。总的来说，这似乎是一个非常糟糕的主意。

：（

Answer 1

当用户浏览网页时，确保ajax搜索脚本不会覆盖值，以防每个页面上运行的搜索脚本与最后位置一起提供某种唯一标识符值。 ex（setCookie({ id : my-unique-page-name , offset : 0, limit : 50 })）
当用户点击“加载更多结果”时，跟踪位置并增加LIMIT和OFFSET值（如果从50开始，则SQL查询将类似于{{1 }}）下一个将是SELECT * FROM blah WHERE blah LIMIT 0, 50，依此类推。
我看到SELECT * FROM blah WHERE blah LIMIT 50, 100这是没用的。只需从第2点跟踪它。
从您的代码中我看到//increment lastPageLoadCount when ajax returns success不需要
还考虑跟踪偏移DOM位置while (，因为卸载窗口事件不是那么可靠。

伪代码看起来像这样：

$(document).on( 'scroll',

返回到ajax结果页面上的最后一个位置

1 个答案: