0

Sorry...can't show any significant code because it is too deeply buried within an app but I think I can describe the problem easily. I have a 2 page form that has a large amount of content on page 1 and just a very small amount on page 2. Switching to page 2 is handled by the following:

 $('#B2').on('click', function () {
    if ($('#page1').valid()) {
        // code to show page 2
        $('#page1').hide();
        $('#page2').show();

All works very well except that when the user is presented page 2 it is very far down the page...the same "relative spot" as they were on with page 1 but it seems to the user as if they are seeing a blank page. If they scroll up they will eventually see the page 2 content. I want to somehow force this window scroll. (Another little "gotcha" is that all of this is in a "wrapped" container within a CMS.) The only thing that seems to work is to actually press the up arrow several times or scroll the mouse wheel.

I have tried to add each of the following lines (individually) immediately after the $('#page2').show();

window.scrollBy(0,-400);
window.scrollTo(0,0);

Any ideas as to what else I can try?

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
RCurtis
  • 115
  • 3
  • 11

2 Answers2

0

You need to target something on the page. Target id=page2. Execute the code below after your show/hide logic.

$('html, body').animate({
    scrollTop: $("#page2").offset().top
}, 2000);
Chris Story
  • 1,197
  • 1
  • 8
  • 17
  • Thanks for the reply but that does not seem to do the trick. User is still at the bottom of Page 2 (#page2) – RCurtis Dec 27 '13 at 21:24
  • I *think* the real catch here is that this is wrapped within the CMS as I shared initially. We need to simulate the hardware mouse scroll or KBD up arrow press...and I'm not sure this can be done with JS or JQ. – RCurtis Dec 27 '13 at 21:28
  • Not to suggest hacks (as I always do with CMS :) ) but could you add an independent dummy element above page1 and target it? Also, this could help http://stackoverflow.com/questions/4210798/how-to-scroll-to-top-of-page-with-javascript-jquery – Chris Story Dec 27 '13 at 23:26
0

I appreciate the help given...I finally just made a workaround by adding a page before my long page and forcing it to be artificially long (past the "Continue" button) so that it keeps that relative position when the real page is shown. Not exactly an elegant solution but the page added has some information that needed to be shown anyway so no big deal.

RCurtis
  • 115
  • 3
  • 11