Usaré ajax para ingresar mensajes y agregaré ese mensaje, pero quiero desplazarme hacia abajo para chatear, pero el documento simple está listo: la función de desplazamiento hacia arriba no funciona

Aquí está el código de trabajo

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

pero no trabajar en

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

Aquí está el código CSS:

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

aquí está el código html

 <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>