Stop default hashtag behavior with jquery

Question

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 when 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!

Answer 1

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

$("a.live").click(function(e) {
    e.preventDefault();
    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.

Answer 2

Try this:

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

Answer 3

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.