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](http://new.syntheticmedia.net).

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!
['https://Stackoverflow.com/questions/14541090', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1254063/']
this solution make the same job for Contact Form 7 (popular form plugin for WordPress). I found this page during the search by Google of my problem, so I added the solution below to help others who ended also at this page.

```
jQuery(function ($) {
    $(document).ready(function ()
    {
        var wpcf7Elm = document.querySelector( '.wpcf7' );
        wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
            setTimeout(function() {
                $([document.documentElement, document.body]).animate({
                    scrollTop: $(".wpcf7-response-output").offset().top - 100
                }, 500);
            }, 500);
            //console.log("Submited");
        }, false );
    });
});

```
```
$(document).ready(function () {
    var $elementToScrollTo;
    var $firstError = $(".error:first");
    if ($firstError.length > 0) {
        $firstError.attr("id", "errors");
        $elementToScrollTo = $firstError;
    }
    else {
        $elementToScrollTo = $("#success");
    }
    $("html,body").animate({
        scrollTop: $elementToScrollTo.offset().top - 175
    }, 1000);
});

```