加載內容滾動底部

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>");

你會在#load_result元素#loader_bar的DOM中有一個#loader_bar ，只需切換display: block / display: none

演示代碼 （略微修改以使其呈現，不確定您的DOM結構是什么樣的）。

修復演示

Answer 2

在ajax成功之后你可以設置不同的屬性滾動條。你可以在ajax調用成功/加載新內容之后設置滾動條位置，例如

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