title: How to make Google Chrome and iOS remember scroll position in div after returning back?
body: <p>The problem is that the scroll container is a <code>div</code>, not <code>body</code>. And that causes Google Chrome and iOS to fail to remember scroll position of the <code>div</code> after users go to another page and then return back.</p>
  
  <p>The related CSS code is as follows. The scroll container is <code>#container</code>.</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
      }
  
  html {
      height: 100%;
      }
  
  body {
      height: 100%;
      overflow: hidden;
      }
  
  #container {
      height: 100%;
      overflow: auto;
      }
  </code></pre>
  
  <p>And <a href="https://jsfiddle.net/w2wkcx0e/" rel="noreferrer">here is a demo</a> on jsFiddle. Please reproduce the issue on Google Chrome and iOS by scrolling the content to about 50% (or any other noticeable length), click on a hyperlink to go to nother page, and then click browser's Back button.</p>
  
  <p>Is there a uncomplicated way to make Google Chrome and iOS remember scroll position like Firefox does?</p>
  
  <p><br>
  == EDIT in response to an answer ==</p>
  
  <p>A simple .html file to test if any code in <code>onbeforeunload</code> works.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script&gt;
          window.onbeforeunload = function () {
              alert('Are you sure');
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;p&gt;&lt;strong&gt;&lt;a href="http://stackoverflow.com/"&gt;Go to Stack Overflow&lt;/a&gt;&lt;/strong&gt;. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet imperdiet diam, in sodales velit porta eget.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>