I've seen here how to scroll to the bottom of a div... But somehow it's not working for me...the same with autofocus.

Guess the problem is that I do an AJAX call, and it doesn't work.

My AJAX call:

  function toonBericht(vuserid) {
    $("#verstuurbericht").show();
    $("#chatresultaatcontent").val("");

    $.ajax({
      type: "GET",
      data: { userid:vuserid }, 
      url: './query/berichten/getbericht.php',
      success: function(result) {
        $("#chatresultaatcontent").html(result);
        var objDiv = document.getElementById("chatresultaatcontent");
        objDiv.scrollTop = objDiv.scrollHeight;
      }
    });
  }

Then ofcourse I have a div called #chatresultaatcontent. It contains the chat messages that have been sent back and forth.

As an alternative I also tried loading a function (i.e. scrollBottom()) after success with the following code:

$("#chatresultaatcontent").scrollTop($("#chatresultaatcontent")[0].scrollHeight);

This also doesn't do anything. Same problem when trying to autofocus on a field after success...anybody know's why?

I've seen here how to scroll to the bottom of a div... But somehow it's not working for me...the same with autofocus.

Guess the problem is that I do an AJAX call, and it doesn't work.

My AJAX call:

  function toonBericht(vuserid) {
    $("#verstuurbericht").show();
    $("#chatresultaatcontent").val("");

    $.ajax({
      type: "GET",
      data: { userid:vuserid }, 
      url: './query/berichten/getbericht.php',
      success: function(result) {
        $("#chatresultaatcontent").html(result);
        var objDiv = document.getElementById("chatresultaatcontent");
        objDiv.scrollTop = objDiv.scrollHeight;
      }
    });
  }

Then ofcourse I have a div called #chatresultaatcontent. It contains the chat messages that have been sent back and forth.

As an alternative I also tried loading a function (i.e. scrollBottom()) after success with the following code:

$("#chatresultaatcontent").scrollTop($("#chatresultaatcontent")[0].scrollHeight);

This also doesn't do anything. Same problem when trying to autofocus on a field after success...anybody know's why?

• javascript
• jquery
• ajax

• Does the element actually have a scrollbar, or are you confusing this with the windows scollbar ? – adeneo Commented Aug 17, 2013 at 15:38
• It has...however it uses the following CSS: overflow: auto; height: 350px;...so if it's more than 350px, a scrollbar appears (which happens in my example) – Nick Commented Aug 17, 2013 at 15:40
• Just try $("#chatresultaatcontent").html(result).scrollTop(1000); and see if it's scrolls the element or not ? – adeneo Commented Aug 17, 2013 at 15:56
• Nope, it show the content, but doesn't scroll :( – Nick Commented Aug 17, 2013 at 16:11
• Then you're probably targeting the wrong element. – adeneo Commented Aug 17, 2013 at 16:18

3 Answers 3

Try this:

success: function(result) {
    var content = $("#chatresultaatcontent");
    content .
        html(result).
        delay(50).
        scrollTop(content[0].scrollHeight);
        // The delay seems essential due to some strange problems
        // with the OP's code
  }

A working Demo

It isn't the prettiest solution, but somehow this seems to work:

  function toonBericht(vuserid) {
    $("#verstuurbericht").show();
    $("#chatresultaatcontent").val("");

    $.ajax({
      type: "GET",
      data: { userid:vuserid }, 
      url: './query/chatten/getchatbericht.php',
      success: function(result) {
        $("#chatresultaatcontent").html(result);
        setTimeout(function(){
          var d = $("#chatresultaatcontent");
          d.scrollTop(d[0].scrollHeight);
        }, 1);
      }
    });
  }

Using a timeout of a microsecond? it does work...if I don't use that it doesn't. Pretty strange, but well...I'll just this solution for now.

$("#chatresultaatcontent").animate({ scrollTop: $(document).height() }, "fast");