Articles → JavaScript → Why We Should Use Javascript Void(0) Over # In Hyperlink

Why We Should Use Javascript Void(0) Over # In Hyperlink

In this article, we will discuss why we should use javascript:void(0) over # in hyperlink.

Scenario

Consider an example where you have a hyperlink at the bottom of the screen. For accessing the link, you have to scroll down to the bottom of the page. To create the scenario, I have created this HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <title></title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script>
         function clickme()
         {
             alert("clicked");            
         }
      </script>
   </head>
   <body>
      Test
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <a href="#" onclick="return clickme();">Click</a>
   </body>
</html>

Now check the above code in the browser, you will see the text ‘Test’ at the top of the screen and a hyperlink ‘Click’ at the bottom of the screen.

Now click on the hyperlink, you will observe that page gets scroll to the top of the screen. Now change the above code to

<!DOCTYPE html>
<html lang="en">
   <head>
      <title></title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script>
         function clickme()
         {
             alert("clicked");            
         }
      </script>
   </head>
   <body>
      Test
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <a href="JavaScript:void(0)" onclick="return clickme();">Click</a>
   </body>
</html>

If you click on the link, the page will not scroll up and will remain at the same position.

Posted By -	Karan Gupta

Posted On -	Wednesday, November 22, 2017

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250