JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css">
<div id="dialog1">
   Now look at the other dialog, see the scroll bar went back to the top!
</div>

<div id="dialog2"> 
    Scroll to the bottom
    <div id="scrollMe">
        <p>
            I love to be scrolled<br>
            a<br>
            b<br>
            c<br>
            d<br>
            e<br>
            f<br>
            g<br>
            h<br>
            i<br>
            Here is the bottom<br>
        </p>
    </div>
    <br>
    Please scroll down the div
</div>

CSS

#scrollMe
{
    height:100px;
    overflow-y:scroll;
}

JavaScript

$(function()
  {          
      
      $( "#dialog1" ).dialog({
                                 title:"Click Me Next"
                             });
      
      /** position and titles are just for explanation purposes doesnt affect outcome */
      $( "#dialog2" ).dialog({
                                 title:"Scroll Me First",
                                 position:{
                                             my:"right top", 
                                             at: "left top",
                                          }
                              });
    
  });