The Short Answer:
href="#" will scroll the current page to the top
href=”javascript: void(0)” will do nothing.
href="#0" will do nothing.
Empty HREF
Empty HREF links basically mean re-navigate the current page. It’s like a Refresh operation which resubmits to the server.
# by itself
Actually is not a do-nothing navigation. It causes navigation to the the top of the page.
If you encourage the use of #, and prevent the default behaviour (scroll to the top of the document), it inevitably leads to some using the return false value of the function in the onclick event :
<a href="#" onclick="return false;">Hey</a><!-- Or --><a href="#" id="link">Hey</a> <script>
document.getElementById("link").addEventListener("click",function(){
return false;
},false);
</script>
Javascript: Tags
You may ocassionally encounter an HTML document that uses href="JavaScript:Void(0);" within an <a> element.
Another way to do this is to provide essentially a null JavaScript link. There are a number of variations for this:
<a href=”javascript:void(0)”>
<a href=”javascript:{}”>
<a href=”javascript:null”>
The links and text are harmless as they literally do nothing, but javascript tangs violates Content Security Policy . See more here
Href="#0"
Unless you have a named link or an ID named 0 - This will work. No navigation and no scrolling.
If for some reason you have an ID or named link called 0 use a different non-existing value for the hash works too.
Use a Button or a Span
If your link doesn’t go anywhere, don’t use an <a> element. Use a <span> or <button>or something else appropriate and add CSS (:hover) to style it as you wish.
Now some frameworks like Bootstrap and Material Design provide custom styling for buttons so that buttons can be styled as links.
For example in bootstrap you can use:
<button class="btn btn-link btn-sm" id="btnlink">Click Here</button>
