How to get my form to start from the top of the page? keeps scrolling to the bottom whenever 'next' button is clicked

Question

I have a form with multiple pages. The first page is ok, it starts up at the top. whenever I hit the next button, the form goes to the next page but it starts from the bottom and you have to scroll up which gets annoying. How can I set the form to start on top every time the next page is hit? https://jsfiddle.net/uz5exL6j/

<form id="regForm"  action="https://formspree.io/mn@gmail.com" method="POST">
  <!-- <h1>Event Application</h1> -->
  <!-- One "tab" for each step in the form: -->
  <div class="tab">
    <H3 id="subhead">CONTACT INFORMATION</H3>
    <label><label id="required">*</label>Primary Contact Name:</label>
    <p><input  required placeholder="First Name" oninput="this.className = ''" name="First-Name"></p>
    <p><input  required placeholder="Last Name" oninput="this.className = ''" name="Last-Name"></p>
    <p>Primary Contact Title:<input placeholder="" oninput="this.className = ''" name="Primary-Title"></p>
    <p>Alternate Contact Name<input  placeholder="First Name" oninput="this.className = ''" name="Alt-Contact-FName"></p>
    <p><input placeholder="Last Name" oninput="this.className = ''" name="Alt-Contact-LName"></p>

Possible duplicate of [Scroll to the top of the page using JavaScript/jQuery?](https://stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript-jquery) — Alon Eitan, Jun 10 '19 at 18:57
I was thinking maybe to just have the CSS reset every time? but idk if that would do it? — Abigail, Jun 10 '19 at 18:58
Css doesn't give you the power over the scroll, since you already using JavaScript why not use it to scroll ? — Rainbow, Jun 10 '19 at 19:01

Vikas Keskar · Accepted Answer · 2019-06-10T19:08:18.183

1

On click of next, add

window.scrollTo(0,0)

So your page always scroll to top when user will click on next button

edited Jun 10 '19 at 19:08

answered Jun 10 '19 at 18:59

Vikas Keskar

1,158
9
17

Next so just add it to this line? – Abigail Jun 10 '19 at 19:04
@Abigail put @Vikas's code at the top of your `showTab` function and it worked for me. – SirFunkButter Jun 10 '19 at 19:05

cssyphus · Answer 2 · 2019-06-10T19:09:19.597

If you place an ID in an anchor tag, the new page will position itself at the top of that anchor tag.

For example:

<a href="my_next_page#regForm">Next</a>

Will navigate to the my_next_page.html page, and position itself with the element having an id="regForm" at the top of the page.

For example, the ID of the div containing this answer is: id="answer-56532070"

Click on the below link and see how the new page is positioned with this answer right at the top of the page:

(Hover over the link first and observe the full link in the bottom left of the browser)

Click Me

How to get my form to start from the top of the page? keeps scrolling to the bottom whenever 'next' button is clicked

2 Answers2