Question

我正在使用Bootstrap表单向导，当用户单击“继续”按钮时，它们将移动到下一个选项卡，但页面向下滚动

我查看了保存脚本的jquery.bootstrap.wizard文件，但无法找到与焦点或动画有关的任何内容。

如果我删除此代码，则不会发生滚动，但后退和最终提交按钮消失

if($settings.onNext && typeof $settings.onNext === 'function' && $settings.onNext($activeTab, $navigation, obj.nextIndex())===false){
    return false;
}

Answer 1

您应该将滚动顶部脚本添加到onTabShow事件中：

<强> 1。滚动脚本

$('html, body').animate({
   scrollTop: $("#rootwizard").offset().top
}, 1000);

<强> 2。 OntabShow formwizard事件：

 $('#rootwizard').bootstrapWizard({
                'tabClass': 'nav nav-pills',                
                onTabShow:function(tab,navigation,index){   
                    //Animate scrolltop
                    $('html, body').animate({
                        scrollTop: $("#rootwizard").offset().top
                    }, 1000);
                }
  });

Answer 2

您使用的是Jquery validation

使用此

    function dontGoToNextStep() {
    $validator.focusInvalid();
    return false;
};

看看如何使用它

'onNext': function (tab, navigation, index) {
        //#region Dont Move Next If there is a Validation Errors
        var $valid = _form.valid();
        if (!$valid) {
            return dontGoToNextStep();
        }
        //#endregion Dont Move Next If there is a Validation Errors

      ....
      if (someCondition)
                return dontGoToNextStep();
      ...
}

单击下一步时停止Bootstrap表单向导聚焦

2 个答案: