Jquery .scrollTop() not working

Question

The title explains my problem. So here's my code:

$("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight);

#my-div get filled using AJAX. So in my ajax request, I've got a success callback which performs the above code:

$.ajax({
    url: 'getLog.php',
    data: {'logFile': 'log.php'}, // echo "<ul> A BUNCH OF <li>s here </ul>"
    success: function(data){
        $("#my-div").html(data);
        // console.log($("#my-div ul")[0].scrollHeight); // Debugging Purposes
        $("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight);
    }
});

I went ahead and console logged $("#my-div ul")[0].scrollHeight (As you can see in the code) to see if it knows the scrollHeight before performing .scrollTop() And it worked (It showed 720 Then i increased the size of the log file, and then i refreshed, it showed 830)

The surprising thing is, when i goto the console (Chrome) and enter

$("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight);

It works perfectly, and the ul scrolls all the way to the bottom!

I can't figure out why it's not working though... :(

Answer 1

Browser do not re-render all content when the HTML is changed, there is always a small gap.If there was no gap the javascript execution would block the browser and the user couldn't use your page (as intended). <- This could be the reason :)

You can try:

$.ajax({
url: 'getLog.php',
data: {'logFile': 'log.php'}, // echo "<ul> A BUNCH OF <li>s here </ul>"
success: function(data){
    $("#my-div").html(data);
    // console.log($("#my-div ul")[0].scrollHeight); // Debugging Purposes
    setTimeout(function() {
       $("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight);
    }, 10);
}
});

If that was the problem you can also try to lower the time inside setTimeout to 0 - it will not be 0 but the minimal time each browser sets.