July 12th in Javascript by pbu .

Fix-> JQuery onclick browser jumps to top of page!

JQuery onclick jumps to top of page

i had an issue with jquery code where i have a html link doing specific tasks for onclick event. Since the appear on bottom of my page, when i click on the link the browser jumps to top of the page every time i click.

<a href="#" onclick="dofunct()">click me</a>

This is really very frustrating as everytime i click a link, the browser jumps to top of page. After a long search, i fixed the problem by replacing # with javascript void function.

<a href="javascript:void(0);" onclick="dofunc()">click me</a>

It neatly solved my jump problem!

4 Comments

Peet
August 10, 2009

Thank you! It helps me.
Reply
Dave H
January 26, 2010

Here is another solution:

click me

Returning false prevents the default action of the item you clicked on. I found your solution and this one while trying to solve the same problem. I like this better because you won’t have the ‘javascript:void(0)’ showing up in the bottom corner of your browser when you hover over the link.
Reply
Charlotte Coleman
February 18, 2010

Thanks, that post has saves me a lot of time debugging!
Reply
Ricardo Zea
March 2, 2010

I while back I read that using ‘javascript:void(0);’ was not a best practice.

Instead you can fix this problem by adding ‘return false;’ to your code, which is a more scalable way of fixing this problem.

IE:

$(‘#container’).click(function () {
$(‘#element’).show();
return false;

More info in this other post: http://stackoverflow.com/questions/976753/jquery-click-brings-me-to-top-of-page-but-i-want-to-stay-where-i-am
Reply