創建自定義 Avada 表單自動滾動腳本

Question

我想為我們的表單自動滾動（使用 Wordpress - Avada 主題制作）。 當他們回答一個問題時，下一個問題會出現在下方，但人們不會在移動設備的視口中直接看到它，因此它應該自動滾動。

您可以在https://schadeoplossing.nl上找到表格（帶有圖像按鈕）

這是表格的樣子

我讓它與插件一起工作：“重力形式”。 我使用了這個自定義腳本。也許這是新腳本的良好開端：

<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>

我知道 html 的工作原理非常好..但我對腳本一無所知，所以請耐心等待我:-)

Answer 1

調用以切換表單上元素可見性的 function 是 window.fusionFormLogics.toggleField()。 因此，滾動到激活的元素的一種簡單方法是在顯示元素時使用 scrollIntoView() 調用覆蓋 function。 我們仍然想運行原始代碼，所以我們得到：

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

當我在你的表單上嘗試這個時，它起作用了，但最后一個元素塊有點大，所有元素都同時顯示。 這意味着 toggleField function 將依次調用所有這些元素，然后我們滾動到顯示的最后一個元素。 為了解決這個問題，我們可以添加一個計時器，如果我們在最后 10 毫秒內沒有滾動，它只會滾動到元素。

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()
  ):[]
}