-1

Clicking on a link to a local anchor can be detected via window.onhashchange() if it involves a change to the URL hash.

However, I notice at least in Chrome (I have not checked this with other browsers), if you then scroll around the page and select a link to the same local anchor again, any onclick handler for the link fires, then the page jumps to to the anchor, but obviously onhashchange() does not fire, and neither does window.onload(). The reason this is significant is both of these would fire after the move to the anchor, whereas the link onclick handler fires before.

So: Is there a correlate to onload() for jumping to a local anchor that is already indicated in the URL hash?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
CodeClown42
  • 11,194
  • 1
  • 32
  • 67
  • The `hashchange` event obviously won't fire when the hash didn't change, and you clicked the same link ? – adeneo Sep 18 '16 at 14:54
  • @adeneo Yes -- although I imagine the same would apply if it were a different link to the same anchor. The page isn't reloaded, so there's no `onload()` event. The URL doesn't change, so there's no event for that. But it moves the page, and I need a handler for *after* that move occurs. – CodeClown42 Sep 18 '16 at 14:56
  • There is no handler for that, but unless you're using some sort of smooth scrolling plugin, it happens right away, and the `click` handler should do. – adeneo Sep 18 '16 at 14:57
  • The problem is the click handler happens *before* the move. I'm using `onhashchange()` to [compensate for a top bar](http://stackoverflow.com/a/39325205/1151724). This happens *after* the move to the anchor, so it is simple to then scroll down a bit. However, scrolling down via `onclick` then having the page move to an anchor is pointless. – CodeClown42 Sep 18 '16 at 15:00
  • I guess the only options are to do the scrolling yourself, then you'd now when it's done scrolling, or use a timeout and guesstimate when the scrolling is done. – adeneo Sep 18 '16 at 15:04
  • Hmmm -- will try a timeout and post if it works. Thanks. – CodeClown42 Sep 18 '16 at 15:05
  • @adeneo Sheesh I might as well scrap the whole `onhashchange` deal and just use that >_ – CodeClown42 Sep 18 '16 at 15:08
  • Okay, you're welcome I guess ? – adeneo Sep 18 '16 at 15:12
  • @adeneo If you want to add it as an answer please do and I'll give it the tick -- otherwise I'll wait an hour or so and do it for similarly lost sailors of the future. – CodeClown42 Sep 18 '16 at 15:14
  • Write a good answer explaning what you did, and how it solved your problem, with some code etc. and that's fine with me. – adeneo Sep 18 '16 at 15:16

1 Answers1

0

There's no event for this, but since the page isn't reloaded it is possible to use a timeout in an onclick handler for the link to wait until after the page has moved, e.g.,

link.onclick = function () {
    setTimeout (
        function () {
            // Do whatever after the jump.
        }, 100
    )
}

A tenth of a second is not very noticeable and probably plenty of time for the shift. If you use 1/4 or 1/2 second, the gap should be noticeable, which may or may not be desirable as a quick clue if "do whatever" is something the user is going to notice happening.

CodeClown42
  • 11,194
  • 1
  • 32
  • 67