jQuery scroll to bottom animation speed issue

Question

I'm just playing around with the front-end jQuery aspects of a forum application (I'm much more suited to the back end - this is a very small foray into the front end world of template + js creation).

Essentially, for every new comment the chat box container automatically scrolls to the bottom, showing the users the most recent message. The following code I'm using to achieve this is:

The chat-messages id is within the chat-box id container, css for both:

#chat-box {
  overflow: none;
  position: relative;
  width: 100%;
  height: 91vh;
}
#chat-messages {
  overflow: auto;
  position: absolute;
  width: 100%;
  max-height: 91vh;
}

To these, I am applying the following animation:

$('#chat-messages').animate({scrollTop: $(document).height() + $('#chat-messages').height()}, "slow");

A condensed version of function used when the submission event is triggered is:

function submitChatMessageEvent( event ) {
   console.log($('#btn-chat-input').val());
   $(chatMessageBlock).hide().appendTo("#chat-messages").fadeIn(1000);
   $('#chat-messages').animate({scrollTop: $(document).height() + $('#chat-messages').height()}, 8000);
}

The animation does what I want it too - that is, ensure the chat box is always showing the most recent chat at the bottom of the chat box. However - to the above animation the "slow" aspect does not work at all...? Any pro-tips on auto-scrolling to the bottom of a div with overflow on.

My thoughts are that I need to create the divider box - but somehow hide it first, then trigger the scrolling effect whilst simultaneously fading in the newly created comment...but I need some pointers if this is the correct method!

Answer 1

Seem to be working fine with the info you provided.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. http://api.jquery.com/show/

 var chatMessageBlock = $('#chat-block'); function submitChatMessageEvent( event ) { $(chatMessageBlock).hide().appendTo("#chat-messages").fadeIn(200 /* fast */); $('#chat-messages').animate({ scrollTop: $(document).height() + $('#chat-messages').height() }, 600 /* 'slow' */); } submitChatMessageEvent(); $('#btn-chat-input').on('click',function(e){ $('#chat-messages')[0].scrollTop = 0; submitChatMessageEvent(e); });

 #chat-box { overflow: none; position: relative; width: 100%; height: 91vh; } #chat-messages { overflow: auto; position: absolute; width: 100%; max-height: 91vh; } p { margin: 1em; padding: 1em; border-bottom: 1px solid #ddd; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="btn-chat-input" value="Send" type="button"/> <div id="chat-block" style="display:none"> <p>One chat message</p> <p>Lorem ipsum</p> <p>My response</p> <p>Lorem ipsum</p> <p>Another chat message</p> <p>Lorem ipsum</p> <p>Another chat message</p> <p>Lorem ipsum</p> <p>One last chat message</p> </div> <div id="chat-box"> <div id="chat-messages"></div> </div>

Answer 2

Just remove the $('#chat-messages')[0].scrollTop = 0; from your click event.

 var chatMessageBlock = $('#chat-block'); function submitChatMessageEvent( event ) { $(chatMessageBlock).hide().appendTo("#chat-messages").fadeIn(200 /* fast */); $('#chat-messages').animate({ scrollTop: $(document).height() + $('#chat-messages').height() }, 600 /* 'slow' */); } submitChatMessageEvent(); $('#btn-chat-input').on('click',function(e){ submitChatMessageEvent(e); });

 #chat-box { overflow: none; position: relative; width: 100%; height: 91vh; } #chat-messages { overflow: auto; position: absolute; width: 100%; max-height: 91vh; } p { margin: 1em; padding: 1em; border-bottom: 1px solid #ddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="btn-chat-input" value="Send" type="button"/> <div id="chat-block" style="display:none"> <p>One chat message</p> <p>Lorem ipsum</p> <p>My response</p> <p>Lorem ipsum</p> <p>Another chat message</p> <p>Lorem ipsum</p> <p>Another chat message</p> <p>Lorem ipsum</p> <p>One last chat message</p> </div> <div id="chat-box"> <div id="chat-messages"></div> </div>