How to make a div element scroll to the top of the page

Question

Assume that I have ten paragraphs of text and there is edit link next to each of paragraph. When I click on 'edit' the contents of the paragraph is available for editing.

So I have

<p id='p1'>data for p1</p>
<p id='p2'>data for p2</p>
<p id='p3'>data for p3</p>
<p id='p4'>data for p4</p>

If I click on 'edit' to edit p3 then text area appears at the very bottom. So right now I see data for p1, data for p2 and just the top of the form for p3. data for p4 is not visible and is below the viewport.

Is there a way in jQuery so that the edit form appears at the top of the page every single time.

I am not trying to use fixed position or anything. The order should still be there. However in this case the data for p1 and p2 should be above the page and not visible. The form for p3 and data for p4 should appear on the page.

Answer 1

You could try and use scrollTop to figure out how far to scroll down the page or an easier approach would be to use the jquery plugin of scrollTo.