Href=”#” Don’t Scroll

I am pretty new to JS – so just wondering whether you know how to solve this problem.

Current I have in my code

<a href='#' class="closeLink">close</a>

Which runs some JS to close a box. The problem I have is that when the user clicks on the link – the href=”#” takes the user to the top of page when this happens.

How to solve this so it doesn’t do this ? i.e. I cant use someting like onclick=”return false” as I imagine that will stop the JS from working ?

Thanks

Answer

The usual way to do this is to return false from your javascript click handler. This will both prevent the event from bubbling up and cancel the normal action of the event. It’s been my experience that this is typically the behavior you want.

jQuery example:

$('.closeLink').click( function() {
      ...do the close action...
      return false;
});

If you want to simply prevent the normal action you can, instead, simply use preventDefault.

$('.closeLink').click( function(e) {
     e.preventDefault();
     ... do the close action...
});