Is there an event that fires when a browser scrolls to a named anchor?

Question

When linking to a page using a named anchor e.g. page.html#heading the browser will load the page, then jump down to the anchor. Is there a browser event that fires when this has completed?

To explain my reasons behind it: I want to use the event to trigger an animation in the browser.

Many thanks.

Answer 1

Changing the hash triggers the hashchange event.

However, I don't think it fires when loading a url where the link already has the hash set. But you can check the hash (location.hash) on page load if you want a certain script to run depending on the hash.

Answer 2

In Safari 7.0.3 on the Mac this works...

HTML has:

<a id="jumper" href="#aa">Jump</a>

JS:

<script>
var j = document.getElementById("jumper");

j.addEventListener("click", registerAnchorJump);

function registerAnchorJump(e) {
    window.addEventListener("scroll", unregisterAnchorJump);
}

function unregisterAnchorJump(e) {
    // trigger your animation...
    console.log(window.scrollY);
    window.removeEventListener("scroll",unregisterAnchorJump);
}
</script>

Fancy footwork to prevent constant firing of scroll event as user scrolls window normally.