Stop default hashtag behavior with jquery

I'm using the following code to append a hashtag to the end of a url. That way someone can copy that url and take them back to that page, with certain divs visable.

$("a.live").click(function() {
    window.location.hash = 'live'; 
    $("#live).slideDown();
});

In this example I have a div called 'live', that would slideDown when a link is clicked, and '#live' added to the url. Then I have code that checks the hash tags wh开发者_运维技巧en the page is loaded to show the proper divs.

My problem is, how do I prevent the browser from jumping to the 'live' div once it's called? I don't want the page to scroll down to the div, just want it opened and the hashtag appended so a person could copy it and come back to that page with that div showing.

Any tips?

Thank you!

Try this:

$("a.live").click(function() {
    window.location.hash = 'live'; 
    $("#live").slideDown();
    return false; // this will prevent default action
});

It depends. If you want to prevent it when the anchor is clicked, use this:

$("a.live").click(function(e) {
    e.preventDefault(); // Prevents browsers default action
    window.location.hash = 'live'; 
    $("#live").slideDown();
});

If you want to prevent it from scrolling to the hash when the page is loaded, I'm not sure how you would prevent that.

I'm assuming you have some code in the document ready event that you use to open the div as you say ? If so, I would suggest you add a prefix to the ID in the hash (like #_live) so that the ID is not found in the document and therefore prevents the browser to automatically scroll to that element, and then modify your code to remove the prefix when you pick it up.

I'm suggesting this 'hack' because I don't think you can prevent that browser behavior using JavaScript, at least surely not reliably for a cross-browser solution.