I will use ajax for input messages and append that message but I want scroll bottom to chat but simple document ready - scroll top function does not work

Here is the working code

 $(document).ready(function(event){
        $('#chatboxouter').mouseenter(function (event) {
        event.preventDefault()
         $(this).scrollTop(400);
        
        
      });
      });

But not work in

$(document).ready(function(){
        
         $('#chatboxouter').scrollTop(400);
});
        

Here is CSS code:

#chatboxouter{
        position: fixed;top: 80px;height: 80vh;width: 100%;
overflow-y: scroll;background-color: navy;
      }

here Is the html code

<div class="mainouter" style=" position: fixed;top: 80px;height: calc(100vh - 160px);width: 100%;
background-color: red;">


<div class="chatboxouter" id="chatboxouter">
<div class="allmessageview" style="background-color: yellow;">
  Here Php input by ajax
</div></div>


</div>