Javascript scroll always on bottom

Question

I have a div class called ".chat-scroll". I need that div class always on the bottom like chat.

 $(".chat-scroll").animate({ scrollTop: $(document).height() }, "slow"); 

 .chat-scroll { overflow-y: scroll; height: 200px; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="chat-scroll"> <ul class="messages list-unstyled"> <li><span class="text">{!! $shout->text !!}</span></li> </ul> </div> 

But does not working.

Answer 1

I wonder why didnt you use {position:fixed} ...

   .chat-scroll {
        overflow-y: scroll;
        height: 200px;
        padding: 10px;
    position:fixed;
    bottom:0;
    right:0;
    }

I think probably you like to practice Jquery