Href="#" Don't Scroll

Question

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...
});

The easiest way to solve this problem is to just add another character after the pound symbol like this:

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

Problem solved. Yes, it was that easy. Some may hate this answer, but they cannot deny that it works.

Just make sure you don't actually have a section assigned to "a" or it will go to that part of the page. (I don't see this as often as I use to, though) "#" by itself, by default, goes to the top of the page.

JavaScript version:

myButton.onclick=function(e){
    e.preventDefault();
    // code
    return false;
}

jQuery version:

$('.myButtonClass').click(function(e){
    e.preventDefault();
    // code
    return false;
});

This just do the job well! :)

One option available to you is not to use href = "#"but instead href = "javascript:;" this will allow you to run the onclick handler whilst not scrolling.

For Example

<a href="javascript:;" onclick="doSomething()">Do Something</a>