Change hash without reload in jQuery

jquery hash reload fragment-identifier window.location
daveredfern picture daveredfern · Dec 21, 2009 · Viewed 107.6k times · Source

I have the following code:

$('ul.questions li a').click(function(event) {
    $('.tab').hide();
    $($(this).attr('href')).fadeIn('slow');
    event.preventDefault();
    window.location.hash = $(this).attr('href');
});

This simply fades a div in based on when you click but I want the page URL hash tag to change when you click so people can copy and bookmark it. At the moment this effectively reloads the page when the hash tag is change.

Is it possible to change the hash tag and not reload the page to prevent the jumping effect?

Answer

jitter picture jitter · Dec 21, 2009

This works for me

$('ul.questions li a').click(function(event) {
    event.preventDefault();
    $('.tab').hide();
    window.location.hash = this.hash;
    $($(this).attr('href')).fadeIn('slow');
});

Check here http://jsbin.com/edicu for a demo with almost identical code

Related questions

Getting URL hash location, and using it in jQuery

I'd like to get the value after a hash in the URL of the current page and then be able to apply this in a new function... eg. The URL could be www.example.com/index.html#foo And I …

Read More
How can I update window.location.hash without jumping the document?

I have a sliding panel set up on my website. When it finished animating, I set the hash like so function() { window.location.hash = id; } (this is a callback, and the id is assigned earlier). This works good, to allow …

Read More
Load content of a div on another page

You will see from this code that it loads the content URL from the hash tag. Is there anyway to load only a single div element from that external page. $(function() { if(location.hash) $("#content_inload").load(location.hash.substring(1)); $("#…

Read More