HTML anchor jumps to id then top of page
<p>On <a href="http://nonestdeus.com/quotes/index.php#twain" rel="nofollow">this page</a>, I've used anchors to create permalinks to specific quotes on the page.</p>

<p>However, I've noticed when putting the url with the anchor directly into the browser's address bar, the page navigates to the anchor and then jumps to the top of the page.</p>

<p>What could be causing the page to jump to the top of the page after jumping to the anchor?</p>

<pre><code>&lt;a href="index.php#twain" id="twain" class="quote"&gt;Mark Twain&lt;/a&gt;
</code></pre>

<p>When clicking on that link from the page, all is fine. However, when I type the URL directly into the browser, it jumps to the top of the page.</p>

<p>Codepen link: <a href="http://codepen.io/PenumbraBrah/pen/vKLymj" rel="nofollow">http://codepen.io/PenumbraBrah/pen/vKLymj</a></p>

<p>EDIT:
Okay. I think I found a temporary (or maybe long term solution).</p>

<p>If I add this script to the page:</p>

<pre><code>&lt;script&gt;
  window.onload = function () {
    var hash = window.location.hash.substring(1);
    window.location.hash = "#" + hash;
  }
&lt;/script&gt;
</code></pre>

<p>...then the page will be repositioned, even if it does jump to the top. It's a workaround at least.</p>