Reload page when changing hash

Question

Reload page when changing hash.

I have a simple one-page site with several 'pages' on it. These pages are in one wide container which scrolls when you choose one. I have added a hash to the URL so that you can locate to specific pages directly. This just sets the style.left attribute when it matches a hash in a switch statement.

The problem is that when I change the hash value in the URL. For example, changing it from Home.html#Web to Home.html#Photos. When doing this, the page doesn't reload so the Setup function I've created that check for the hash isn't called and the page just remains where it is.

Any ideas for a way to force the page to reload? Or a better solution?

Thanks, Andy

Answer 1

Don't reload the page. Instead, set up a onhashchange event handler, and adjust the left value from there:

window.onhashchange = function() {
    // do stuff
}

Otherwise, why using hash links instead of regular links? In any case, if you really want to reload, just put window.location.reload() inside the onhashchange handler...

Answer 2

I had a JQuery function that fired on $('body').on('click', '.subcategory-link', function () { }); 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: below i write the code pls try this one it wrok from me charm.

       $(document).ready(function() {    
            $('body').on('click', '.subcategory-link', function () {        var data = $(this).attr('href');
           alert($(this).attr('href'));
           window.location.reload();
           });

});