Jquery - Show/Hide - always goes up the page on click

Question

I am using the JQuery show/hide functionality in a form (generated with php)

In this form, there are 10 hidden elements, and every time the user click on an "add another" link, it displays the next hidden element, and my footer goes down with it. So far, so good.

Now the problem is after 2 or 3 hidden elements are shown, the page gets bigger and the right navigation scroll bar from firefox appears, which is fine, but then when I click on the next "add another" link, the navigation scroll bar flicks back to the top of the page while the hidden element is being displayed. Every link that adds a new hidden element makes the page flicking back to the top, and I don't want this behaviour...

Does anyone know a way to fix this?

Answer 1

What about adding a return false at the end of the click event

Answer 2

Is the 'add another' an actual a element with a click handler that adds the new content?

If so, you probably want event.preventDefault(). Try something like this:

$('.myClickedLink').click(function(event) {

    event.preventDefault();
    // Run my code

})

This prevents the default behavior of the link. I'm guessing that this is what is causing your page to return to the top every time.

EDIT: At first, in my code, I mistakenly typed stopPropagation() instead of preventDefault(). It was correct in the text above, though. Sorry.