JQuery preventDefault() but still add the fragment path to the URL without navigating to the fragment

Question

My question is similar to this one but none of the answers solve my problem: Use JQuery preventDefault(), but still add the path to the URL

When a user clicks a fragment link, I need to remove the default behaviour of jumping to the fragment but still add the fragment to the URL. This code (taken from the link) will fire the animation, and then add the fragment to the URL. However the fragment is then navigated to, which im my case breaks my site.

$("#login_link").click(function (e) {
    e.preventDefault();
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear', function(){  window.location.hash =     $(this).attr('href'); });

});

Answer 1

By updating the hash via location.href, the browser automatically navigates to the pointer. e.preventDefault() only cancels the default behaviour of the event, it does not affect other hash change methods, even if they're called from within the same event listener.

You can use history.replaceState or history.pushState to change the hash without jumping:

// Replaces the current history entry
history.replaceState(null, '', '#newhash');

Answer 2

You're preventing the default handler of the login_link element from firing, but you're specifically setting window.location.hash and that will cause a navigation to happen. Do you actually have an anchor named the thing you're setting in the hash? If not, can you describe how it breaks your site to 'navigate' to an anchor on the page when it doesn't exist? Normally this does not cause a problem.