Creating a custom Avada form autoscroll script

Question

I'd like to have a autoscroll for our form (made with the Wordpress - Avada theme). When they answered a question, the next question appears underneath, but people don't see this directly in the viewport on mobile, so it should autoscroll.

You can find the form (with image buttons) on https://schadeoplossing.nl

This is what the form looks like

I had it working with the plugin: 'gravity forms'. I used this custom script.. perhaps this is a good start for the new script:

<script>function onNextCollapsibleBtnClick(e) 
{var $sectionBody = jQuery(this).closest('.collapsible-sections-collapsible-body');
if ($sectionBody.length) {$nextSection = $sectionBody.nextAll('.collapsible-sections-field:visible:first');
if ($nextSection.length) 
{// If section isn't open, trigger click to open it
if (!$nextSection.hasClass('collapsible-sections-open')) {$nextSection.trigger('click');

jQuery('body').on('click', '#choice_30_38_0', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_38_1', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_38_2', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_38_3', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_38_4', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_38_5', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_40_0', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_40_1', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_42_0', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_42_1', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_51_1', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_49_1', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_57_0', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#choice_30_64_1', onNextCollapsibleBtnClick);
jQuery('body').on('click', '#volgende', onNextCollapsibleBtnClick);</script>

I know how html works pretty good.. but i don't know anything about scripting, so please be patient with me :-)

Answer 1

The function that is called to toggle visibility of an element on your form is window.fusionFormLogics.toggleField(). Therefore an easy way to scroll to an element that is made active is to just override that function with a scrollIntoView() call when an element is shown. We still want to run the original code, so we get this:

var toggleFieldOld=window.fusionFormLogics.toggleField;
window.fusionFormLogics.toggleField=function(o, i) {
  toggleFieldOld(o,i)
  o ? i[0].scrollIntoView({behavior:"smooth", block: "center"}:[]
}

When I tried this on your form it works, but the last block of elements is a bit big and all elements are shown at the same time. This means the toggleField function is called on all of them in sequence and we scroll to the last element that is shown. To fix this we can add a timer that only scrolls to the element if we haven't scrolled in the last 10 ms.

var toggleFieldOld=window.fusionFormLogics.toggleField;
var scrollTimer = 0;
window.fusionFormLogics.toggleField=function(o, i) {
  toggleFieldOld(o,i)
  o && scrollTimer < (Date.now() - 10) ? (
    i[0].scrollIntoView({behavior:"smooth", block: "center"}), 
    scrollTimer = Date.now()
  ):[]
}