Question

I have a auto chat section where I have to get the scrollbar of chat to the bottom. Like this:

function chatuser(user1) {
    $("#currentuser").load('chatcontent.php', {
        current: user1
    }, function afterchatuser() {
        $("#currentcontent").attr({
            scrollTop: $("#currentcontent").attr("scrollHeight")
        });
    });
}

<div id="currentuser"></div>

For the auto update I automatically refresh the function. Like this:

var auto_refresh = setInterval(function chatauto() {
    chatuser(user1);
}, 2000);​

But every time it refreshes where ever the scrollbar is,it gets to the bottom. Like if the user scrolls to the top, after the refresh it automatically gets the scrollbar to the bottom. I want to stop this, but also it should get refreshed timely. Please help me.

Answer 1

What you basicly need is to change (increase) scrollTop of the messages container by the value of the new content height difference. Take a look at this demo it should give you some idea.

$('div').scrollTop(function() {
    return scroll + $(text).appendTo($(this)).height();        
});

Here scroll old scrollTop value before new content appended.