How to Manage Page Breaks to Go to Top of Page

Gravity Support Forums » Plugin Support » Gravity Forms

rscrouse
Member

I am designing a quiz with page breaks inserted to separate the questions. When a person clicks the button to proceed from one question to the next, Gravity forms indexes down into the page so that the page is partially scrolled to exactly the top of the progress bar. This creates a very "jump" effect. I would rather the quiz form (which I have embedded within the WP page content) just bring up the next page without scrolling down. How can I do this? Here is my quiz page: http://www.fleyedocs.com/cataract-quiz-1/

Thank you.

Rich

Posted 11 years ago on Tuesday July 31, 2012 | Permalink
Chris Hajer
Key Master

Can you try embedding that form with AJAX? When you embedded the form with the shortcode, there was a check box for "Enable AJAX". Please embed the form again and check that box and see if it affects the jumpiness and scrolling.

If that does not help, please export this form as XML (Import/Export menu, then the "Export Forms" option from the top menu) and email it to me at chris@rocketgenius.com and I will take a look at it for you.

Posted 11 years ago on Tuesday July 31, 2012 | Permalink
rscrouse
Member

Hi Chris. Thank you for your response. I have to leave town for the next 5 days and so I won't be able to try your suggestions until I get back. Please do not close this discussion chain. I will follow up on this as soon as I return. Thank you.

Posted 11 years ago on Wednesday August 1, 2012 | Permalink
Chris Hajer
Key Master

I promise not to close this. If you need to nudge me, please send an email to chris@rocketgenius.com with a link to this topic as a reminder. Thanks

Posted 11 years ago on Wednesday August 1, 2012 | Permalink
rscrouse
Member

Hi Chris. I tried enabling AJAX and it did not help. I emailed you the file you asked for . Thank you for your help.

Rich

Posted 11 years ago on Monday August 6, 2012 | Permalink
Chris Hajer
Key Master

I emailed you for more information Richard. Thank you.

Posted 11 years ago on Tuesday August 7, 2012 | Permalink
Chris Hajer
Key Master
On multi-page forms, we can scroll the loaded page to a specific point by using the gform_page_loaded event.

Fires on multi-page forms when changing pages (i.e. going to the next or previous page).

First, embed the form using AJAX (ajax="true" in the shortcode).

Then, save this code as "scroll-to-top.js" in your theme's "js" folder (here - http://www.fleyedocs.com/wp-content/themes/Builder/js/ ).
```
[js]
jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page){
    jQuery(document).scrollTop(0);
});
```
Then, in your theme's functions.php, add this:
http://pastebin.com/5VeZNFbP

That code will enqueue our "scroll to top" script whenever form 3 is in use. I think that will work for your site.

After that, test it out. Please let us know when all the pieces are in place so we can take a look and verify if it looks OK or not, or needs some additional work.

Thanks.
Posted 11 years ago on Tuesday August 7, 2012 | Permalink
rscrouse
Member

This worked perfect. Thank you very much for all your help!

Regards.

Rich

Posted 11 years ago on Wednesday August 8, 2012 | Permalink

This topic has been resolved and has been closed to new replies.