I am trying to reload current page with different url hash, but it doesn\'t work as expected.
(Clarification how I want it to work: Reload the page and then scroll t
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.
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.
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)
});
}
Another option is to remove the hash and store it in session storage to be retrieved 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 can have the following code:
var savedHash = sessionStorage.savedHash;
if (savedHash){
delete sessionStorage.savedHash;
location.hash = savedHash;
}