Stop Bootstrap form wizard focusing when clicking next

Question

I am using the Bootstrap form wizard and when the user clicks the continue button they are moved to the next tab but the page scrolls down

I've looked in the jquery.bootstrap.wizard file that holds the script but cannot find anything to do with focus or animate.

If i remove this code the scroll won't happen but the back and final submit button dissapears

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

Answer 1

You should add scrolltop script into onTabShow event:

1. Scrolltop script

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

2. OntabShow formwizard event :

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

Answer 2

is you are using Jquery validation

use this

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

look how to use it

'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();
      ...
}