location.hash only take effect once in chrome and safari

Question

I use location.hash to scroll to somewhere in my page. It works fine when the location has no hash. But it does not work if the location already has the same hash value.

For example, location.hash = 'a'; scrolls to <div id="a"></div>. Now location.href will be like http://www.example.com/test.html#a. And if location.hash = 'a'; is triggered again, the window will not scroll. This only take place in Chrome and Safari.

I found a solution at Scrolling a page using location.hash in Safari, but I don't want to add an unnecessary tag.

And I have also tried location.href = '#a'. That works fine but I'm afraid it will cause page reloading. Does anybody have better ideas?

Answer 1

Your best bet is to replace the hash temporarily with some value that you know does not exist on the page, and then reload the hash trying to be accessed.

location.hash = 'a';

// this is the function that changes the hash
function setHash(newHash) {
    location.hash = 'someHashThatDoesntExist';
    location.hash = newHash;
}

setHash('a');

That should do the trick.