How to force a page to reload if all what was changed in url is hash?

Remove the anchor you're going to navigate to, then use approach #2? Since there's no anchor, setting the hash shouldn't scroll the page.

I had a JQuery function that fired on $(document).ready() which detected if there was a hash appended to the URL in my case, so I kept that function the same and then just used a force reload whenever a hash change was detected:

$(window).on('hashchange',function(){     window.location.reload(true); });

Then my other function -

$(document).ready(function() {    var hash = window.location.hash;        if(hash) {           //DO STUFF I WANT TO DO WITH HASHES    }});

In my case, it was fine for UX -- might not be good for others.

It should be expected that #foo will scroll to the anchor of the id, "foo". If you want to use approach #1 and have it reload, this approach might work.

if (Object.defineProperty && Object.getOwnPropertyDescriptor) { // ES5    var hashDescriptor = Object.getOwnPropertyDescriptor(location, "hash"),    hashSetter = hashDescriptor.set;    hashDescriptor.set = function (hash) {        hashSetter.call(location, hash);        location.reload(true);    };    Object.defineProperty(location, "hash", hashDescriptor);} else if (location.__lookupSetter__ && location.__defineSetter__) { // JS    var hashSetter = location.__lookupSetter__("hash");    location.__defineSetter__("hash", function (hash) {        hashSetter.call(location, hash);        location.reload(true)    });}