Keep webpage from scrolling to top on form submit.

Question

I am submitting a form via an anchor tag and javascript.

<a onclick="submit_form();">Submit</a>

As soon as the button is clicked, the page immediately scrolls to the top of the page and continues the normal form submission process.

How can I keep the page from scrolling to the top and why does it do that?

Answer 1

You could in the form have a name anchor

<a name="name"></a>
<form action="example.html#name">

It does that because a form submit is a new page request.

Answer 2

Change your OnClick event to be in the HREF.

<a href="JavaScript:submit_form();">Submit</a>

Or return False so that it doesn't continue processing the click

<a onClick="submit_form(); return false;">Submit</a>