Me gustaría tener un desplazamiento automático para nuestro formulario (hecho con el tema Wordpress - Avada). Cuando respondieron una pregunta, la siguiente pregunta aparece debajo, pero las personas no ven esto directamente en la ventana gráfica del dispositivo móvil, por lo que debería desplazarse automáticamente.
Puede encontrar el formulario (con botones de imagen) en https://schadeoplossing.nl
Así es como se ve el formulario
Lo tenía funcionando con el complemento: 'formas de gravedad'. Usé este script personalizado... tal vez este sea un buen comienzo para el nuevo 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>Sé cómo funciona html bastante bien... pero no sé nada sobre secuencias de comandos, así que tenga paciencia conmigo :-)
La función que se llama para alternar la visibilidad de un elemento en su formulario es window.fusionFormLogics.toggleField(). Por lo tanto, una manera fácil de desplazarse a un elemento que se activa es anular esa función con una llamada scrollIntoView() cuando se muestra un elemento. Todavía queremos ejecutar el código original, así que obtenemos esto:
var toggleFieldOld=window.fusionFormLogics.toggleField; window.fusionFormLogics.toggleField=function(o, i) { toggleFieldOld(o,i) o ? i[0].scrollIntoView({behavior:"smooth", block: "center"}:[] }Cuando probé esto en su formulario, funcionó, pero el último bloque de elementos es un poco grande y todos los elementos se muestran al mismo tiempo. Esto significa que se llama a la función toggleField en todos ellos en secuencia y nos desplazamos hasta el último elemento que se muestra. Para solucionar esto, podemos agregar un temporizador que solo se desplace al elemento si no lo hemos hecho en los últimos 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() ):[] }