jquery-validation-engine scroll to first error

Question

I have a page where we have a fixed banner at the top, then a scrolling section down below that fixed banner. In this scrolling section, we have the form we are validating. If I have an error with a field earlier in the form, that is current scrolled up into the banner ( or maybe even above the banner ), it does not scroll to the first error field correctly. How do I resolve this type of problem?

I have three screen shots to better explain what I mean. I could not post the images themselves, so posted links to the images.

Figure 1: Before submitting form

Figure 2: After submitting form, bad scrolling. It goes to first error field, just not scrolled correctly

EDIT ( 04/18/2014 ): I can confirm that this code from jquery.validationEngine.js is what is not working. Basically, no matter what I set "destination" to, it still scrolls to the top of the window, NOT the top of the container all this stuff is in. Even if I force "destination" to be some huge number, it is like it ignores it. Should this jQuery plugin be doing things differently?

    $("html, body").animate({
                scrollTop: destination
            }, 1100, function(){
                if(options.focusFirstField) first_err.focus();
            });
            $("html, body").animate({scrollLeft: fixleft},1100);

Answer 1

Ok, I now have an even better fix. In the same section of code, I applied the below changes:

_validateFields: function(form) {
                ...... // code removed for the sake of brevity, but enough include to show context.
    if (errorFound) {
        if (options.scroll) {
            var errorfld = first_err; // This is the first change, at around line 371 in the original code.
            var fixleft = first_err.offset().left;

            //prompt positioning adjustment support. Usage: positionType:Xshift,Yshift (for ex.: bottomLeft:+20 or bottomLeft:-20,+10)
            var positionType=options.promptPosition;
            if (typeof(positionType)=='string' && positionType.indexOf(":")!=-1)
                positionType=positionType.substring(0,positionType.indexOf(":"));

            if (positionType!="bottomRight" && positionType!="bottomLeft") {
                var prompt_err= methods._getPrompt(first_err);
                if (prompt_err) {
                    errorfld = prompt_err;
                }
            }

            var destination= form.scrollTop() + ( errorfld.offset().top - form.position().top ) + ( errorfld.height()/2 );

Once again, I am not sure if this will work in all uses of the jquery.validationEngine.js plugin, but it works in my case. If anyone else has a better idea, do tell me.