What is the difference between href="", href="#" and href="javascript:void(0)"?

Question

What is the difference between href="", href="#" and href="javascript:void(0)"?
What are the different uses for them and when is one better than another?

Answer 1

href="" will reload the current page

href="#" will scroll the current page to the top

`href="javascript: void(0)" will do nothing.

You can get the same effect of javascript: void(0) by returning false from the click event handler of the anchor with either of the other two methods as well.

I prefer to use <a id="the-link" href="#">Link</a> and then bind an event handler to the click listener somewhere in my javascript like:

document.getElementById('the-link').onclick = function(){ 
    // Do stuff
    return false;
};

This way, since you're using #, even if the user has javascript disabled the page won't reload (it will just scroll to the top), and I think it's a lot cleaner looking than javascript: void(0)