滚动到错误字段ERROR

我想知道在提交表单时如何将页面滚动到错误的字段。我到处搜索，找到了很多jquery的解决方案，但没有一个解决方案能像我希望的那样工作。我找到了一个解决方案，当我成功提交时滚动页面，但当我有错误时却没有。为了更好地理解，下面是我评论的源代码：

// function that check filled when key up
function checkFilled(variable) {
	var inputVal = document.getElementById(variable).value;
    if (inputVal == "") {
        document.getElementById(variable).style.borderColor = "red";
    }
    else{
        document.getElementById(variable).style.borderColor = "green";
    }
}
// function that check email filled
function checkFilledEmail(variable) {
	fld_value = document.getElementById(variable).value;
    is_m_valid = 0;
    if (fld_value.indexOf('@') >= 1) {
        m_valid_dom = fld_value.substr(fld_value.indexOf('@')+1).length;
        
        if (m_valid_dom >= 1) {
        	is_m_valid = 1;
        }
        
    }
    if (is_m_valid) {
       document.getElementById(variable).style.borderColor = "green";
    } else {
       document.getElementById(variable).style.borderColor = "red";
    }
    
}
    $(function(){
        $("#contact").submit(function(event){
            var nom        = $("#nom").val();
            var sujet      = $("#sujet").val();
            var email      = $("#email").val();
            var message    = $("#message").val();
            var dataString = nom + sujet + email + message;
            var msg_all    = "Merci de remplir tous les champs";
            var msg_alert  = "Merci de remplir le champs: ";
            $("#msg_all").html('');
            $("#msg_nom").html('');
            $("#msg_email").html('');
            $("#msg_sujet").html('');
            $("#msg_message").html('');
            
            if(dataString  == "")
            {
                document.getElementById('nom').style.borderColor = "red";
                document.getElementById('email').style.borderColor = "red";
                document.getElementById('sujet').style.borderColor = "red";
                document.getElementById('message').style.borderColor = "red";
            }
            else if(nom == "")
            {
                document.getElementById('nom').style.borderColor = "red";
                 
                /*
                //In that position, this code didn't work but above with ajax it worked very well                     
                        $('html, body').animate({
                        scrollTop: $("#msg_nom").offset().top
                        }, 500);
                */
// => I want to find code that do the same action as scrollTop but with javascript.
               
            }
            
            else if(email == "")
            {
               
                document.getElementById('email').style.borderColor = "red";
            }
             else if(sujet == "")
            {
                document.getElementById('sujet').style.borderColor = "red";
            }
            else if(message == "")
            {
                document.getElementById('message').style.borderColor = "red";
            }
            else
            {
                $.ajax({
                    type : "POST",
                    url: $(this).attr("action"),
                    data: $(this).serialize(),
                    success : function(){
                        $("#msg_all").html(" <p style='text-align:center; margin-bottom:40px;'>Formulaire bien envoyé</p> ");
                        $(':input','#contact')
   						.not(':button, :submit, :reset, :hidden')
   						.val('');
   						$("#msg_nom").html('');
   						$("#msg_email").html('');
   						$("#msg_sujet").html('');
   						$("#msg_message").html('');
   						document.getElementById('nom').style.borderColor = "";
                        document.getElementById('email').style.borderColor = "";
                        document.getElementById('sujet').style.borderColor = "";
                        document.getElementById('message').style.borderColor = "";
                        
                      
                    //In that position, this code work and the screen scroll   
                      
                      /*
                        $('html, body').animate({
                        scrollTop: $("#msg_nom").offset().top
                        }, 500);
                      */
						
                    },
                    error: function(){
                        $("#msg_all").html("<p style='text-align:center; margin-bottom:40px;'>Erreur dappel, le formulaire ne peut pas fonctionner</p>");
                      document.getElementById('nom').style.borderColor = "";
                        document.getElementById('email').style.borderColor = "";
                        document.getElementById('sujet').style.borderColor = "";
                        document.getElementById('message').style.borderColor = "";
                    }
                });
            }
            return false;
        });
    });
   

element.style {
display: block;
height: auto;
}
.field-style {
width: 50%;
height: 46px;
margin-bottom: 26px;
background-color: transparent;
  }
.label-style {
margin-bottom: 9px;
font-family: Merriweather, serif;
line-height: 17px;
font-weight: 400;
  display:block;
}
element.style {
border-color: red;
}
.simple-button {
display: block;
margin-right: auto;
margin-left: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="process.php" id="contact" method="POST">
       
       
            <label  for="nom" class="label-style">Nom</label>
            <input class="w-input field-style" id="nom" name="nom" onkeyup="checkFilled('nom');" type="text">
       
            <span id="msg_nom"></span>
       
        
            <label for="email" class="label-style">Email</label>
            <input class="w-input field-style" id="email" name="email"  onkeyup="checkFilledEmail('email');" type="email">
            <span id="msg_email"></span>
            <label for="sujet" class="label-style" >Sujet</label>
            <input class="w-input field-style" id="sujet" name="sujet" onkeyup="checkFilled('sujet');" type="text">
            <span id="msg_sujet"></span>
        
            <label class="label-style" for="message">Message</label>
            <textarea class="w-input messageform" id="message" name="message" onkeyup="checkFilled('message');"  rows="10" cols="80"></textarea>
            <span id="msg_message"></span>
        
        
            <span id="msg_all"></span>
            <input class="w-button simple-button" type="submit" value="Envoyer" />
        
    </form>

你知道我怎样才能达到目标吗？或任何允许我继续搜索的关键字。