title: Stop Div scrolling to the top at Page Refresh using Jquery
body: <p>I have two pages with the same css class and the same id, but since they are on different pages, the id is the separator.</p>
  
  <p><strong>Page 1)</strong> Got a Div being refreshed every 5 seconds. The div has scrolling set to scroll so that user can scroll, but when the refresh happens the div scrolling goes back to the top. Any ideas/written script on <strong>how I can keep the scroll position after the div is refreshed</strong>?</p>
  
  <p><strong>Page 2)</strong> This is similar to page 1, other from, When users come to this page the first time, I want the scroll position to be at the bottom, then when the refresh happens, I want to keep the scroll position of the div <strong>wherever I have scrolled to</strong> after its refreshed</p>
  
  <p><strong>Bottom Line: I'm relatively new to Front-End design, so Please, your contribution should be something I would understand easily or close to easy</strong>
  This is my css</p>
  
  <pre><code> .msg_container_base{
        background: #fff;
        margin: 0;
        padding: 0 10px 10px;
        max-height:400px;
        overflow-x:hidden;
        overflow-y:auto;
      }
  
      .msg_container_base::-webkit-scrollbar-track
      {
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
          background-color: #fff;
      }
  
      .msg_container_base::-webkit-scrollbar
      {
          width: 12px;
          background-color: #fff;
      }
  
      .msg_container_base::-webkit-scrollbar-thumb
      {
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
          background-color: #fff;
      }
  </code></pre>
  
  <p>This is my java script for loading and refreshing</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
  var auto_refresh = setInterval(
  function ()
  {
  $("#grid").load('mai/ #grid');
  }, 20000); // refresh every 10000 milliseconds
  
  &lt;/script&gt; 
          &lt;div id="grid"&gt;
  
          @RenderPage("~/mai.cshtml") 
        &lt;/div&gt;
  </code></pre>