title: Chrome Scrolling Bug?
body: <p>I am fighting with weird Chrome behavior, when page loads it jumps on the bottom of the page and then immediately back up to top.</p>
  <p>Reproducible in</p>
  <ul>
  <li>Chrome 84.0.4147.135 (Official Build)</li>
  <li>Chromium 80.0.3987.162</li>
  </ul>
  <p>Conditions</p>
  <ul>
  <li>There must be a fragment in URL '#bottom' referencing an element on very bottom of the page</li>
  <li>Javascript will try to scroll on the very bottom of the page as well using html.scrollTop</li>
  </ul>
  <p>When both conditions are true then the problem happens. Page jumps on the bottom (there is a red div - it flashes red) and then immediately back on top (becomes white again).</p>
  <p>When there is only '#bottom' fragment without javascript or only javascript without '#bottom' fragment all works as expected - page is red as it scrolls on the very bottom. It is only when both mechanisms are used that it does not work.</p>
  <p>Expected behavior</p>
  <ul>
  <li>Javscript scrollTop modifications jumps on the bottom - page stays red (works)</li>
  <li>Fragment reference jumps on the bottom - page stays red (works)</li>
  <li>Both scrollTop modification and fragment reference jumps on the bottom - page stays red (does not work)</li>
  </ul>
  <p>Current behavior:</p>
  <ul>
  <li>Page jumps on the bottom - becomes briefly red - and then jumps back up  and stays white</li>
  </ul>
  <p>Note: It appears that Chrome simply restores initial scroll position. When you start on the bottom and you hit &quot;CTRL+R&quot; it stays on the bottom. When you start on top and hit CTRL+R then it stays on top while briefly jumping on the very bottom of the page.</p>
  <p>Simplified code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;body&gt;
      &lt;!-- Just a button that makes sure there is '#bottom' fragment in URL, resets scrolling and reloads page --&gt;
      &lt;a href=&quot;javascript:location='#bottom';document.documentElement.scrollTop=0;location.reload();&quot; style=&quot;position: fixed;&quot;&gt;
              CLICK TO TEST
              &lt;div&gt;&lt;small&gt;Keep clicking and if you see RED BACKGROUND FLASH you can reproduce the problem.&lt;/small&gt;&lt;/div&gt;
      &lt;/a&gt;
  
      &lt;!-- Two big divs with distinct colors so we can see color flash when it jumps --&gt;
      &lt;div id=&quot;top&quot; style=&quot;background: white; height: 10000px;&quot;&gt;&lt;/div&gt;
      &lt;div style=&quot;height: 500vh; background-color: red;&quot;&gt;&lt;/div&gt;
  
      &lt;!-- bottom target referenced by '#bottom' above --&gt;
      &lt;div id=&quot;bottom&quot;&gt;BOTTOM ANCHOR&lt;/div&gt;
  
      &lt;script type=&quot;text/javascript&quot;&gt;
              document.documentElement.scrollTop = document.documentElement.scrollHeight;
      &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I could not use the inline preview because it needs URL with fragment. You can temporarily see it live <a href="https://www.cyrex.tech/local/chrome-scroll-issue/#bottom" rel="nofollow noreferrer">here</a>.</p>
  <p>Edit: Observation - the whole issue appears to be Chrome trying to preserve old scrollTop position despite Javascript changing it to new one.</p>