HTML anchor jumps to id then top of page

On this page, I've used anchors to create permalinks to specific quotes on the page.

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.

What could be causing the page to jump to the top of the page after jumping to the anchor?

<a href="index.php#twain" id="twain" class="quote">Mark Twain</a>

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.

Codepen link: http://codepen.io/PenumbraBrah/pen/vKLymj

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

If I add this script to the page:

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

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