title: jQuery scrollTop function not working after ajax call
body: <p>here is my ajax call... works fine but the scrollTo plugin from Jquery is not positioning the content where I want it to be. below</p>
  
  <pre><code> //this will show the contents of the email body when the list item is clicked.
      jQuery("#list-item-"+username+"").click(function(){
  
          jQuery(".reply-to-container").hide();
          jQuery("#reply-to-"+username+"").toggle("slide", {direction: 'up'});
          jQuery("#reply-input-"+username+"").val('');
          jQuery(".display-reply-content").html("");
          jQuery("#send-btn-ajax-"+username+"").hide();
          jQuery("#reply-input-"+username+"").hide("slide", {direction: 'up'});
  
  
          var myUsername = getUrlVars()['username'];
          var messageID = &lt;?php echo $this-&gt;message_id; ?&gt;;
          var dataString = 'messageID='+ messageID + '&amp;friend=' + username + '&amp;myUsername=' + myUsername;
  
          $.ajax({
              type: "POST",
              url: "/friends/mark-read/", 
              data: dataString,
              cache: false,
              success: function(html)
              {    
                  jQuery("#mail-icon-"+username+"").replaceWith("&lt;div id='mail-icon-"+username+"' class='ui-icon ui-icon-mail-open mail-closed'&gt;");
                  jQuery("#display-reply-"+username+"").css({"display" : "none"}).html(html).fadeIn(2500);
                  console.log(jQuery("#display-reply-"+username+"")[0].scrollHeight);
                  jQuery("#display-reply-"+username+"").scrollTop(jQuery("#display-reply-"+username+"").scrollHeight);
  
              },
              error: function(jqXHR, textStatus, errorThrown) 
              {
                  console.log(textStatus, errorThrown);
              }
          }) 
      })
  </code></pre>
  
  <p>Here is my CSS of the Div</p>
  
  <pre><code>.display-reply-content{
      max-height: 200px;
      overflow: auto; 
      }
  </code></pre>