Scroll an element to the top on click

Scroll an element to the top on click

I have a basic form I made that people will complete on a tablet device.

When clicking the first input field, the keyboard comes into view and takes up the bottom third of the screen, hiding the further fields.

If I could make the form scroll to the very top of the page, the other fields can be visible amking it obvious for the user which fields they have to fill in.

So my question, how do I make the input field scroll to the very top of the page on click?

  1. <header>Some bumph in here, such as logo and welcome text</header>
  2. <h1>Form title</h1>
  3. <input type='text' name='togototop' />
  4. Other content
So in effect, click the input and the header and h1 scroll up and out of view and the input is now at the top of the page.

Thanks