Question

滚动到底部时，我使用以下函数加载更多结果。

一切运作良好;唯一的问题是，当加载某些内容时，窗口会向后滚动到顶部，就像保持之前的位置一样，而不是加载新的结果。实际上，它不会完全返回到顶部，而是返回到第一个加载结果的高度。因此，要查看刚刚加载的内容，您必须滚动回到底部。这就是这个'周期'将重新开始的地方......

$(window).scroll(function () {
    if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
        document.getElementById("loader_bar").style.display = 'block';
        load_result();
    }
});

function load_result() {
    counter = check_counter();
    type = $("#search_type").html();
    key = $("#search_key").html();

    $("#load_result").html("<p id='loader_bar' style='width:100%; height:32px'></p>");

    var par = "key=" + key + "&type=" + type + "&counter=" + counter;

    $.ajax({
        url: "ajax/search-columns-result.php",
        success: show_result,
        data: par,
        type: "POST"        
    });

    function show_result(rs) {
        if (rs != '') {
            $("#load_result").html(rs);
            $('#loader_bar').css('display',"none");
        } 
    }
}

function check_counter() {
    if( typeof check_counter.counter == 'undefined' ) { 
        check_counter.counter = 3;
    }
    return check_counter.counter++;
}

Answer 1

在我看来，每次拨打show_results时，您都会覆盖自动加载的所有先前结果：

$("#load_result").html(rs);

这会导致您的元素被删除，然后窗口会向上滚动（因为整个文档的高度现在更短）。

我想你想要打电话

$("#load_result").append(rs);

您还需要更改创建/显示加载程序的方式。而不是：

$("#load_result").html("<p id='loader_bar' style='width:100%; height:32px'></p>");

#loader_bar元素后面的DOM中会有#load_result，只需切换display: block / display: none

Demo of your code（稍加修改以使其呈现，不确定您的DOM结构是什么样的。）

Demo of fix

Answer 2

在ajax成功之后，您可以设置不同的属性滚动条。您可以在ajax调用成功/加载新内容后设置滚动条位置，例如

window.scrollTop(0); //for auto scroll to top

加载内容滚动底部

2 个答案: