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

回答1:

Try this:

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

回答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.

回答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.