jquery scrollTop to the elements scrollHeight is not working?

Question

I'm creating a simple chat. I need to scroll to the bottom of the screen everytime a new message comes in.

However, my code for the scrolling to the bottom is not working at all.

To demonstrate this, I created this fiddle:

https://jsfiddle.net/jcp1sw23/

And this is my jquery code:

$(document).on("click",".sendPm",function() {


    var txt = $('#message2').val();


    var htm = '<li id="'+ txt +'" class="self"><div class="msg"><p>'+ txt +'</p><time>7:45</time></div></li>';

      $(".endDivChat").before(htm);

   var $t = $('#messages');
   $t.animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");

      });

If you type a few messages until the messages elemet is full, you should see the scrollbar appears. But it doesn't animate or scroll to the bottom.

Specifically, this is my code for the scrolling to the bottom:

   var $t = $('#messages');
   $t.animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");

Could someone please advice on this issue?

Thanks in davance.

Answer 1

You have to use

$("html, body").animate({ scrollTop: 1000 }, 1000);

to scroll the scrollbar to the bottom whenever user sends the message

$(document).on("click",".sendPm",function() {

      
		  var txt = $('#message2').val();
      
      
      var htm = '<li id="'+ txt +'" class="self"><div class="msg"><p>'+ txt +'</p><time>7:45</time></div></li>';
      
      $(".endDivChat").before(htm);
      
   $("html, body").animate({ scrollTop: 1000 }, "slow");
      
      });

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

html, body {
    background: #e5e5e5;
    font-family: 'Lato', sans-serif;
    /*margin: 0px auto;*/
}
::selection{
  background: rgba(82,179,217,0.3);
  color: inherit;
}
a{
  color: rgba(82,179,217,0.9);
}

/* M E N U */

.menu {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 50px;
    background: rgba(82,179,217,0.9);
    z-index: 100;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.back {
    position: absolute;
    width: 90px;
    height: 50px;
    top: 0px;
    left: 0px;
    color: #fff;
    line-height: 50px;
    font-size: 30px;
    padding-left: 10px;
    cursor: pointer;
}
.back img {
    position: absolute;
    top: 5px;
    left: 30px;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.98);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    margin-left: 15px;
    }
.back:active {
    background: rgba(255,255,255,0.2);
}
.name{
    position: absolute;
    top: 3px;
    left: 110px;
    font-family: 'Lato';
    font-size: 25px;
    font-weight: 300;
    color: rgba(255,255,255,0.98);
    cursor: default;
}
.last{
    position: absolute;
    top: 30px;
    left: 115px;
    font-family: 'Lato';
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    cursor: default;
}

/* M E S S A G E S */

.chat {
    list-style: none;
    background: none;
    margin: 0;
    padding: 0 0 50px 0;
    margin-top: 60px;
    margin-bottom: 10px;
}
.chat li {
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
}
.chat .avatar {
    width: 40px;
    height: 40px;
    position: relative;
    display: block;
    z-index: 2;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    background-color: rgba(255,255,255,0.9);
}
.chat .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    background-color: rgba(255,255,255,0.9);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.chat .day {
    position: relative;
    display: block;
    text-align: center;
    color: #c0c0c0;
    height: 20px;
    text-shadow: 7px 0px 0px #e5e5e5, 6px 0px 0px #e5e5e5, 5px 0px 0px #e5e5e5, 4px 0px 0px #e5e5e5, 3px 0px 0px #e5e5e5, 2px 0px 0px #e5e5e5, 1px 0px 0px #e5e5e5, 1px 0px 0px #e5e5e5, 0px 0px 0px #e5e5e5, -1px 0px 0px #e5e5e5, -2px 0px 0px #e5e5e5, -3px 0px 0px #e5e5e5, -4px 0px 0px #e5e5e5, -5px 0px 0px #e5e5e5, -6px 0px 0px #e5e5e5, -7px 0px 0px #e5e5e5;
    box-shadow: inset 20px 0px 0px #e5e5e5, inset -20px 0px 0px #e5e5e5, inset 0px -2px 0px #d7d7d7;
    line-height: 38px;
    margin-top: 5px;
    margin-bottom: 20px;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.other .msg {
    order: 1;
    border-top-left-radius: 0px;
    box-shadow: -1px 2px 0px #D4D4D4;
}
.other:before {
    content: "";
    position: relative;
    top: 0px;
    right: 0px;
    left: 40px;
    width: 0px;
    height: 0px;
    border: 5px solid #fff;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.self{
    justify-content: flex-end;
    align-items: flex-end;
}
.self li{
	
	background: #e1ffc7;
}
.self .msg {
    order: 1;
    border-bottom-right-radius: 0px;
    box-shadow: 1px 2px 0px #D4D4D4;
}
.self .avatar {
    order: 2;
}
.self .avatar:after {
    content: "";
    position: relative;
    display: inline-block;
    bottom: 19px;
    right: 0px;
    width: 0px;
    height: 0px;
    border: 5px solid #fff;
    border-right-color: transparent;
    border-top-color: transparent;
    box-shadow: 0px 2px 0px #D4D4D4;
}

.msg {
    background: white;
    min-width: 50px;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
}
.msg p {
    font-size: 0.8rem;
    margin: 0 0 0.2rem 0;
    color: #777;
}
.msg img {
    position: relative;
    display: block;
    width: 450px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px #eee;
    transition: all .4s cubic-bezier(0.565, -0.260, 0.255, 1.410);
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.self .msg{
	
	background: #e1ffc7 !important;
}



@media screen and (max-width: 800px) {
    .msg img {
    width: 300px;
}
}
@media screen and (max-width: 550px) {
    .msg img {
    width: 200px;
}
}

.msg time {
    font-size: 0.7rem;
    color: #ccc;
    margin-top: 3px;
    float: right;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.msg time:before{
    content:"\f017";
    color: #ddd;
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
            <div class="back"> <img src="https://media.gettyimages.com/photos/close-up-portrait-of-teenage-girl-picture-id518339053" draggable="false"/></div>
            <div class="name">test user</div>
            <div class="last status">Offline</div>
        </div>
    <ul class="chat" id="messages">
	
	<div class="endDivChat"></div>
    <!--<li class="other">
        <div class="avatar"><img src="https://i.imgur.com/DY6gND0.png" draggable="false"/></div>
      <div class="msg">
        <p>Hola!</p>
        <p>Te vienes a cenar al centro? <emoji class="pizza"/></p>
        <time>20:17</time>
      </div>
    </li>
    <li class="self">
        <div class="avatar"><img src="https://i.imgur.com/HYcn9xO.png" draggable="false"/></div>
      <div class="msg">
        <p>Puff...</p>
        <p>Aún estoy haciendo el contexto de Góngora... <emoji class="books"/></p>
        <p>Mejor otro día</p>
        <time>20:18</time>
      </div>
    </li>-->
    </ul>
    
    
    
    <div style="width:100%; height:44px; position:fixed; bottom:0; left:0;z-index:10;background:#fff;">
	
	
    <input style="padding-left:15px;border:none;height:44px;width:80%;display:inline-block;float:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;" id="message2" type="text" placeholder="Type here!"/>
	                <button style="color:rgba(82,179,217,0.9);font-size:24px;text-align:center;line-height:44px;width:20%;display:inline-block;float:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;" class="sendPm" >
                    <div class="circle" style="">
                      <i class="zmdi zmdi-mail-send"></i> Send
                    </div>
                  </button>
</div>

Answer 2

Here you are applying scroll on messages ul element. While after watching your demo it was clear that your scroll is at body level and hence the scrolling code should be:

var $t = $('html');
$t.animate({"scrollTop": $('body')[0].scrollHeight}, "slow");

Here your body has scrollHeight which needs to be set on parent container of fixed height i.e. html element.

Here is js fiddle link which is working after adding above code:

https://jsfiddle.net/jcp1sw23/27/

Answer 3

Because your scrolling element is not the #messages element but the body: so try this:

$(document).on("click", ".sendPm", function() {  

  var txt = $('#message2').val();    

  var htm = '<li id="' + txt + '" class="self"><div class="msg"><p>' + txt + '</p><time>7:45</time></div></li>';

  $(".endDivChat").before(htm);

  $("html, body").animate({
    scrollTop: 2000
  }, 600);

});

Answer 4

   $("html, body").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");

you were selecting the messages at the front, you want the html body since that is what is scrolling:)

here is it working: https://jsfiddle.net/jcp1sw23/31/