EN
RU
ES
ZH
FR
DE
PT
AR
HI
# or javascript:void(0): what to choose for JavaScript links? Full explanation with code
Hello, fellow developer! If you've ever written links that don't navigate to a new page but instead run JavaScript code (for example, opening a modal window, loading content, or triggering an animation), you've likely faced the dilemma: which href attribute value should you use? href="#" or href="javascript:void(0)"?
This question is a real hit on Stack Overflow (thousands of views!), and for good reason. It seems like a small detail, but it affects how the page behaves: will it scroll to the top, will a hash appear in the URL, will it work in older browsers? Let's figure out once and for all which approach is better, and why the "correct" answer isn't so straightforward.
The problem: why change href at all?
Imagine: you're writing a button that opens a menu:
<a href="#" onclick="openMenu(); return false;">Menu</a>Or like this:
<a href="javascript:void(0)" onclick="openMenu();">Menu</a>Both options "work," but each has its own surprises. Let's compare them by key criteria.
Option 1: href="#" — a classic with a catch
# is a link to the "top" of the page. If you simply write <a href="#">, the browser will scroll the page to the top. To avoid this, you need to add return false; to the handler:
<a href="#" onclick="doSomething(); return false;">Click me</a>Pros:
- Accessibility: the link remains focusable (you can tab to it).
- Semantics: for screen readers, it's still a link (even if it leads nowhere).
- Simplicity: easy to remember, quick to write.
Cons:
- Scroll to top: if you forget
return false, the user loses their position. - URL change: adds
#to the address bar (sometimes undesirable). - Browser history: creates a history entry (the "Back" button will go to the previous "#" page).
Option 2: href="javascript:void(0)" — a hack from the old days
javascript:void(0) is a JavaScript pseudo-protocol. It tells the browser: "execute the code void(0) and don't follow the link." void(0) returns undefined, so the page doesn't move.
<a href="javascript:void(0)" onclick="doSomething();">Click me</a>Pros:
- Doesn't scroll the page — no
return falseneeded. - Doesn't change the URL — no hash is added.
Cons:
- Accessibility issues: some older screen readers may "stumble" over
javascript:in href. - Violates progressive enhancement principles: if the user has JavaScript disabled, the link doesn't work (leads to nothing).
- Invalid HTML? Formally,
javascript:is a non-standard protocol, but browsers understand it. However, the W3C validator may complain. - Harder to debug: if there's an error in href, the browser may behave unpredictably.
Comparison table
| Criteria | href="#"
|
|---|
