Scroll To error and success message after submitting a form using ScrollTo jQuery Plugin

Question

So far I have this working properly for the error message only. However, I would like this to work for success message as well. This should happen when the submit button is pressed in the contact form. Click contact at the top right of the page to scroll to it.

You can test it here.

Here is the jQuery I'm using for the error message:

     $(document).ready(function() {
     $(".error:first").attr("id","errors");
    $("#errors").each(function (){
        $("html,body").animate({scrollTop:$('#errors').offset().top-175}, 1000);
    });
  });

Any way to modify it to work with scrolling to #success and #errors with the same offset().top-175 ?

Thanks in advance!

Answer 1

You could do :

  $(document).ready(function() {
     var pos = null;
     if($("#contact-form #errors.visible").length > 0)
        pos = $('#errors').offset().top;

     if($("#contact-form #success.visible").length > 0)
        pos = $('#success').offset().top;

     if(pos != null)
         $("html,body").animate({scrollTop:pos-175}, 1000);
  });

And fix the fact that your script "js/contact_script.js" must be declared after JQuery lib