Javascript jQuery验证，滚动到error donds'；我不能正常工作

因此，我有一个3阶段的表单，在每个步骤进行验证，然后在提交时再次进行验证。我有一些问题，我想这可能是由于我的JS的结构，但我不能确定

出于某种原因，它只会滚动到第一个错误一次，一旦有人填写字段时清除了该错误，它就会滚动到页面顶部。尽管事实上，我们现在可以翻开新的一页了。我已经复制了所有相关的代码，并且去掉了很多JS，因为有大约300行。如果您希望看到其“xxxx”的工作副本，我有一个实时url

这里是JS

var form = $("#msform");
    form.validate({
        rules: {
            age: { 
                digits: true,
                minlength: 2
            },
            group: {
                required: true
            },
            product: {
                required: true
            },
            tan: {
                required: true
            },
            exfoliate: {
                required: true
            },
            advertising: {
                required: true
            },
            morizLove: {
                required: true
            },
            morizMoreProducts: {
                required: true
            },
            terms: {
                required: true
            },
            media: {
                required: true,
                minlength: 4
            },
            other: {
                required: true              
            },
            buyother: {
                required: true,
                minlength: 4
            },
        },
        messages: {
            fullname: { 
                required: "Please tell us your full name"
            },
            age: { 
                required: "Please tell us your age"
            },
            email: { 
                required: "Please enter a valid email"
            },
            address: { 
                required: "Please tell us your Address"
            },
            postcode: { 
                required: "Please tell us your Post Code"
            },
            product: { 
                required: "Please select a product"
            },
            tan: { 
                required: "Please tell us how often you self tan"
            },
            buymost: { 
                required: "Please tell us which product you use most"
            },
            group: {
                required: "Please select at least 1"
            },
            maintain: {
                required: "Please select at least 1"
            },
            advertising: {
                required: "Please select at least 1"
            },
            morizMoreProducts: {
                required: "Please tell us what products you would like to see from St. Moriz"
            },
            morizLove: {
                required: "Please tell us what you love most about St. Moriz"
            },
            terms: {
                required: "Please accept our Terms & Conditions"
            },
            media: {
                required: "Please tell us what media you have seen advertising this campaign"
            },
            other: {
                required: "Please tell us where you normally buy St. Moriz products from"
            },
            buyother: {
                required: "Please tell us which product you use most"
            },
        },
        errorPlacement: function(error, element) {
            switch(element.attr("name")) {
            case "product": 
                error.insertAfter( $(".product-error") );
                break;
            case "tan": 
                error.insertBefore( $(".tan-error") );
                break;
            case "group": 
                error.insertAfter( $("#other") );
                break;
            case "exfoliate": 
                error.insertAfter( $(".exfoliate-error") );
                break;
            case "maintain": 
                error.insertAfter( $(".maintain-error") );
                break;
            case "terms": 
                error.insertBefore( $(".terms-error") );
                break;
            case "advertising": 
                error.insertBefore( $(".advertising-error") );
                break;
            default:
                // the default error placement for the rest
                error.insertAfter(element);
            }
   }
    });

$(".submit").click(function(){
    $("#msform").validate();

    if (form.valid() == false){

        $('html, body').animate({
       scrollTop: ($('.error').offset().top - 60)
    }, 500);
    }
});


$(".next").click(function(){
    // if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();


        if (form.valid() == true){

            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({opacity: 0}, {
                step: function(now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale current_fs down to 80%
                    scale = 1 - (1 - now) * 0.2;
                    //2. bring next_fs from the right(50%)
                    left = (now * 50)+"%";
                    //3. increase opacity of next_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                'transform': 'scale('+scale+')',
                'position': 'absolute'
              });
                    next_fs.css({'left': left, 'opacity': opacity, 'position': 'relative'});
                },
                duration: 800,
                complete: function(){
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });     

                //activate next step on progressbar using the index of next_fs
            $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active").find('img').attr("src","images/boardActive.png");

            // Scroll to top of next step form.

            $('html, body').animate({
         scrollTop: $("#progressbar").offset().top - 200
            }, 500);
            return false;

        }   
        else { // Scrolls to top error
            $('html, body').animate({
         scrollTop: ($('.error').offset().top - 60)
        }, 500);
        }

});

$(".previous").click(function(){
    // if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active").find('img').attr("src","images/board.png");;

    //show the previous fieldset
    previous_fs.show();
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity, 'position': 'relative'});
        },
        duration: 800,
        complete: function(){
            current_fs.hide();
            animating = false;
        },
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });

});

我知道那里有很多代码，但我认为这可能是一个结构性问题。非常感谢您抽出时间阅读此文章。请查看IP地址以获取表单对验证的反应的工作副本

非常感谢您抽出时间阅读此文章

编辑：已删除实时链接，因为问题已得到回答。

<代码>$（'html，body'）。动画({ scrollTop:（$（'.error:visible'）.offset（）.top-60） }, 500); 您的选择器将与所有错误类匹配，无论是否显示。在您的例子中，animate函数获取列表中的第一个匹配项

---

添加“：visible”时，您只选择了页面上显示的元素。

我怎么会错过这个？？在所有的谷歌搜索中，我找到了解决我问题的方法，但没有人使用：可见。非常感谢！与“实时链接”不同，您应该包括相关的HTML以及类似JSFIDLE演示的内容。毕竟，SO的目的是为未来的读者保留这些问答。你的这些缺失对他们的帮助要小得多。