Usage of javaScript:void(0)

Question

I've been advised to use javascript:void(0) to avoid an unexpected scroll down during an anchor tag click. I was told to use it like this:

<a href="javascript:void(0)">Click Me</a>

Now, what if the anchor tag has already been referred, say:

<a href="#carousel-main">Click Me</a>

How do I use javascript:void(0) to avoid the unwanted movement of page on clicking the anchor tag?

This is the carousel code:

<div class="col-md-12 column">
 <div class="carousel slide" data-ride="carousel" data-interval="5000" id="carousel-main">
  <ol class="carousel-indicators">
     <li  class="active"  data-slide-to="0" data-target="#carousel-main"></li>
     <li  data-slide-to="1" data-target="#carousel-main"></li>
     <li  data-slide-to="2" data-target="#carousel-main"></li>
     <li  data-slide-to="3" data-target="#carousel-main"></li>
  </ol>
  <div class="carousel-inner">
     <div class="item active">
        <img class="home-img-slideshow" title="Banner1" alt="Banner1" src="image-1.jpg" />
     </div>

     <div class="item">           
        <img class="home-img-slideshow" title="Lorem Ipsum Lorem Ipsum" alt="Lorem Ipsum Lorem Ipsum" src="image-2.jpg" />
     </div>

     <div class="item">
        <img class="home-img-slideshow" title="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum" alt="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum" src="image-3.jpg" />

     </div>

     <div class="item">
        <img class="home-img-slideshow" title="Lorem Ipsum " alt="Lorem Ipsum " src="image-4.jpg" />            
     </div>
  </div>

  <a class="left carousel-control" href="#carousel-main" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#carousel-main" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

He's asking _how_ - not _why_. What do you mean OP? Can't you just use your first example? — h2ooooooo, Apr 13 '16 at 11:01
@h2ooooooo, if I replace the "#carousal-main" with "javascript:void(0)" in the *'href'*, then the carousal doesn't load the next image on clicking the anchor tag — Varun Nair, Apr 13 '16 at 11:03
@RayonDabre, I've gone through that question and I know what and how javascript:void(0) is used. I'm asking what I should do in case there is already something that is used as the reference in href section of the anchor tag. How will I use javascript:void(0) to prevent the scrolling effect? — Varun Nair, Apr 13 '16 at 11:04
your carousel code should `return false` or `event.preventDefault()` show your carousel code and we'll be able to help more — andrew, Apr 13 '16 at 11:07
This looks like a bootstrap carousel? in bootstrap the default event (scroll to anchor) will be handled for you, my guess is you have some other error in your javascript preventing that happening, check your console — andrew, Apr 13 '16 at 11:23

score 1 · Answer 1 · answered Apr 13 '16 at 11:20

void(0) will return undefined which will prevent the default action. In the link's case the default action is to navigate.

However, this is an anti pattern and you should really think thrice before adding a void(0) in your src. For (mainly) accessibility reasons you most probably want to use a button element in your example. The rule of thumb is really simple:

If it navigates to another page - use a link
If it changes something on the current page - use a button.

Much has been written about the usability impacts of using links as buttons, some can found here:

This is a part of Bootstrap Carousel. I've updated my question. This is the default [Bootstrap Carousel](http://getbootstrap.com/javascript/#carousel) — Varun Nair, Apr 13 '16 at 11:22

score 1 · Answer 2 · answered Apr 13 '16 at 11:28

Now, what if the anchor tag has already been referred, say:

<a href="#carousal-main">Click Me</a>

How do I use javascript:void(0) to avoid the unwanted movement of page on clicking the anchor tag?

You need to write a Jquery and prevent the click event. Try this

 $(function(){
    $('a[href="#carousal-main"]').on('click',function(e){
       e.preventDefault(); // this will make sure it doesnt scroll.
    });
 });

And because of event bubbling, this script will not affect your carousal functionality.

Usage of javaScript:void(0)

2 Answers2