Scroll to top of page on element hide with Onsen UI

Question

I have the following page:

<ons-template id="login.html">
<ons-page id="login-page">
  <ons-toolbar>
    <div class="center">Register</div>
  </ons-toolbar>

  <div class="content" style="text-align: center">

    <div id="startCodeRegistration">
      <!-- long form with many fields -->
    </div>

    <div id="endCodeRegistration" style="display:none;">
      <!-- just a success message -->
      <p>Registration Complete!</p>
    </div>

  </div>
</ons-page>
</ons-template>

In my success handler I have:

$( '#startCodeRegistration' ).hide();
$( '#endCodeRegistration' ).show();

Everything is working except I don't see the success message because the page is still scrolled down because the user had to scroll to the bottom of the page to submit the form. Is there any way to scroll the page to the top?

I tried:

document.getElementById('endCodeRegistration').scrollIntoView();

I also tried:

document.querySelector('#endCodeRegistration').scrollTop = 0;

Neither worked. Any ideas?

Answer 1

Try adding style="position: fixed;" to endCodeRegistration. This should make it so that its always over everything