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

Accepted answer
Score: 34

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

Score: 5

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


Then 2 my other function -

$(document).ready(function() {
    var hash = window.location.hash;    
    if(hash) {

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

Score: 2

It should be expected that #foo will scroll 3 to the anchor of the id, "foo". If you want 2 to use approach #1 and have it reload, this 1 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);
    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);
Score: 0

Another option is to remove the hash and 3 store it in session storage to be retrieved 2 on reload:

var newUrl = location.href + '#myHash';
var splitUrl = newUrl.split('#');
newUrl = splitUrl[0];
if (splitUrl[1]){
    sessionStorage.savedHash = splitUrl[1];
location.href = newUrl;

and then on top of your page you 1 can have the following code:

var savedHash = sessionStorage.savedHash;
if (savedHash){
    delete sessionStorage.savedHash;
    location.hash = savedHash;

More Related questions