how to stop a hashtag's default click behaviour?

Question

Possible Duplicate:
Stop default hashtag behavior with jquery

I have some jquery code on a link that loads a DIV into the page using .load(), it also adds a hashtag to the url for pagination / bookmarking purposes; what i want to do is to stop the page from jumping to the div when the link is clicked.

$('#jqNav li a').click(function(){

    if($(this).parent().is(".nav1")){ $('.landing .main .nav ul').css({ "background-position" : "0 -50px" });} 
    else if($(this).parent().is(".nav2")) {    $('.landing .main .nav ul').css({ "background-position" : "0 -100px" });}
    else if($(this).parent().is(".nav3")) {    $('.landing .main .nav ul').css({ "background-position" : "0 -150px" });}
    else if($(this).parent().is(".nav4")) {    $('.landing .main .nav ul').css({ "background-position" : "0 -200px" });};


    stopAnim = true;
    $page = $(this).attr('href');
    var $hashTag = $(this).attr('name');
    window.location = "#" + $hashTag;
    loadData();
    e.preventdefault();
    return false;

});

@Michael Irigoyen i already have return false in my code which was the answer to your link, it still passes the problem, note the e.preventdefault(); was just added. — Xavier, Jun 22 '11 at 20:03

Naftali · Accepted Answer · 2012-11-16T18:56:34.507

7

Try using use e.preventDefault(); on the link click

Try using $(window).scrollTop(0); to prevent the # from affecting the page

edited Nov 16 '12 at 18:56

answered Jun 22 '11 at 19:40

Naftali

144,921
39
244
303

This did exactly what i needed it too do thanks Neal! – Xavier Jun 22 '11 at 21:45

score 5 · Answer 2 · edited May 23 '17 at 10:33

You can use e.preventDefault() for this

http://api.jquery.com/event.preventDefault/

Or use:

return false;

Which does both preventDefault() and stopPropagation()

http://api.jquery.com/event.stopPropagation/

EDIT

Don't think what you want can be done. Since it would be bad security wise to be able to change the URL of a page without going to that URL.

You can for example change the URL to the URL of a bank letting users think your page represent the bank.

Maybe it works when only adding a hash so you can give the following a try (haven't tested it, might very well not work):

window.location.hash = $hashTag;
return false;

EDIT2

I know I just told you it doesn't work however I just stumbled upon this post here on SO which uses HTML5 to do what you want:

Is there a way to change the browser's address bar without refreshing the page?

Again not tested :)

my code already has a return default, but it seems to jump otherwise see OP for code; — Xavier, Jun 22 '11 at 20:01
Thanks this is useful but im not gonna rebuild the whole thing, so neals answer proved to be more appropriate to my needs. — Xavier, Jun 22 '11 at 21:46

score 0 · Answer 3 · edited May 23 '17 at 12:10

You could use return false; as the last statement in the click-handler. That or use both event.preventDefault() and event.stopPropagation() (return false is equal to the both of them together, preventing the default behaviour for that element and preventing the event from bubbling up through the DOM).

References:

event.preventDefault()
event.stopPropagation()
event.preventDefault() vs. return false (at Stack Overflow)

how to stop a hashtag's default click behaviour?

3 Answers3