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.

Answer 1

Try this:

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

Answer 2

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.

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.