Is there a way to fire a 'hashchange' event even if the hash is the same?

Question

I have an event listener like this:

window.addEventListener('hashchange', () => setTimeout(() => this.handleHashChange(), 0));

Then in this handleHashChange function I have some logic for scrolling to an on page element. Taking into account the space it needs to leave for the collapsing/expanding header. If I go to #team from #mission this works fine. The problem is when I click #team twice. Since the hash stays the same it doesn't go in the event listener and falls back to the default browser scroll. I then end up with my header on top of the element, not leaving enough space. Is there a way to overwrite that, too?

Can be jquery or vanilla JS

Answer 1

If you want to force hashchcange event without literaly changing hash you should call: window.dispatchEvent(new HashChangeEvent("hashchange"))

Related question here