Бесконечная прокрутка вверх как в чате предыдущих сообщений

$(document).ready(function($)
  {
  $(".im-dialog").animate({ scrollTop: 20000000 }, "slow");
  });


var block_show = false;

function WatchMore()
  {
  var $target = $("#showmore-triger");
  if (block_show)
    {
    return false;
    }
  var page = $target.attr("data-page");
  page++;
  block_show = true;

  $.ajax({
    url: "/new/im/ajax/previus_messages.php?id=26675&page=" + page,
    dataType: "html",
    success: function(data)
      {
      $(".im-dialog #im-dialog-prev").append(data);
      block_show = false;
      }
    });
  console.log("/new/im/ajax/previus_messages.php?id=26675&page=" + page);

  $target.attr("data-page", page);
  if (page >=  $target.attr("data-max"))
    {
    $target.remove();
    }
  }

$("#prev-mess").click(function()
  {
  WatchMore();
  });

.im-dialog
  {
  height:300px;
  padding:0 8px 0 0;
  margin:16px -8px 16px 0;
  overflow:auto;
  }
.im-dialog-left
  {
  float:left;
  max-width:85%;
  background-color:#f4f4f4;
  border-radius: 0 12px 12px 12px;
  padding:12px;
  border:1px solid #f0f0f0;
  }
.im-dialog-right
  {
  float:right;
  max-width:85%;
  background-color:#FFFFFF;
  border:1px solid #f0f0f0;
  border-radius: 12px 0 12px 12px;
  padding:12px;
  }
.clearer {clear:both;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="im-dialog">
<div id="showmore-triger" data-page="1" data-max="3"><a href="javascript:void(0);" id="prev-mess">предыдущие сообщения</a></div>

  <div id="im-dialog-prev"></div>

  <div class="im-dialog-left">
      текст текст текст 
  </div>
  <div class="clearer"></div>

  <div class="im-dialog-right">
      текст 2 
  </div>
  <div class="clearer"></div>

  <div class="im-dialog-left">
      текст3 текст4 текст 4
  </div>
  <div class="clearer"></div>

  <div class="im-dialog-right">
      текст 4 
  </div>
  <div class="clearer"></div>

</div>