[ask] JQuery preventDefault is not working

[eantz]

Hi,
I want create a page which has animation at the bottom of that page. I use jQuery to do that..

this is the way I do it

<a href="#" class="animation">Animate this</a>

and this is the jquery

$(document).ready(function() {
	$('a.animation').click(function(e) {
		e.preventDefault();
		//animation goes here;
	});
});

When I run the code, all animation run very well except the page always scroll to the top. I try to change the href attribute to javascript:void(0); but it still run like that..

How can I fix it?

Thanks before,
Sorry for my English..

[nauticalmac]

You could do away with your anchor tags and use span instead. Then use CSS to style the cursor to pointer so it shows up as clickable like a link.

Hi,
I want create a page which has animation at the bottom of that page. I use jQuery to do that..

this is the way I do it

<a href="#" class="animation">Animate this</a>

and this is the jquery

$(document).ready(function() {
	$('a.animation').click(function(e) {
		e.preventDefault();
		//animation goes here;
	});
});

When I run the code, all animation run very well except the page always scroll to the top. I try to change the href attribute to javascript:void(0); but it still run like that..

How can I fix it?

Thanks before,
Sorry for my English..

[jomanlk]

You can just remove the # from the href (leave it empty or give it a false page url and not an anchor) and return false instead of preventDefault(). Probably not the best way, and your HTML won't validate. But it should fix your issue if HTML validation is not a concern.

[eantz]

Hi all..
I have tried all of your suggestion. But, it didn't work.
But, I just realize that when animations run, actually the page do not scroll to the top of the page. It just scroll to some pixels to the top. But it is disturbing. I'm starting to find where the page actually go when the animations run or may be there is an error in my code.

Thanks all,
I will post it here later if I find it.
But, if someone who has any others suggestion, I hope it will help me..

[nauticalmac]

I think you need to look elsewhere for the problem. I have tested the following and no scrolling occurs.
html code:

<div id="padding"></div>
<span class="animate">Animate this.</span>

javascript code:

$(document).ready(function() {
  $('span.animation').click(function() {
    alert("Animate!");
  });
});

css code:

#padding {height:1500px;}
.animate {cursor:pointer;}

I've posted a simple page to demonstrate:
Animate Code Test

If you are still having problems, you need to post your other code so we can help.

Hi all..
I have tried all of your suggestion. But, it didn't work.
But, I just realize that when animations run, actually the page do not scroll to the top of the page. It just scroll to some pixels to the top. But it is disturbing. I'm starting to find where the page actually go when the animations run or may be there is an error in my code.

Thanks all,
I will post it here later if I find it.
But, if someone who has any others suggestion, I hope it will help me..

[eantz]

Hi nauticalmac,
Thanks again,
As I said, I think I there is a mistake in my code.
I'm still trying to find it. But, actually I do not find it yet..:D