Jquery - Scroll to bottom not working within bootstrap modal

Question

I am doing a simple task of opening a bootstrap modal & there is a div within that modal with scrollbar & i am scrolling directly to the bottom.

Below is my code :-

<div id="ul_chats" style="height: 300px; overflow: auto;">
....
</div>

jq.ajax({
                url : "/Controller/GetComments",
                type : "get",
                dataType: "html",
                async: false,
                success : function(dataHtml) {                        
                    jq(".partialChats").html(dataHtml);
                    jq("#chatModal").modal('toggle');                             
                }                
            });

            var objDiv = document.getElementById("ul_chats");
            objDiv.scrollTop = objDiv.scrollHeight;

My Modal opens up but the div is not scrolled to the bottom. If i execute last 2 lines from the console then the div gets to the bottom.

Answer 1

Try a code like this

$("#ul_chats").animate({ scrollTop: $("#ul_chats").height() }, "slow");

if it does not work where you put the scroll, try to put it inside the sucess:

 success : function(dataHtml) {                        
                jq(".partialChats").html(dataHtml);
                jq("#chatModal").modal('toggle');
                $("#ul_chats").animate({ scrollTop: $("#ul_chats").height() }, "slow");         
            }