Question

I have a lot text boxes in a form that get a class added to them when submitted
then that class gets a :first selector along with .focus() to focus on the text box that didn’t receive any input but it cutoffs the message above the text box.

So how do I move the scroll bar in conjunction with the .focus() on text box?

Answer 1

Something like this is what you’re after right?

$(function() {

    $('input, textarea').each(function() {
        var os = $(this).offset().top;
        $(this).bind('focus', function() {
            $('html,body').animate({scrollTop: os}, 300);
        });
    });

});

When you focus either an input or a textarea it will scroll to it.

Here’s a fiddle of it in action: http://jsfiddle.net/fExhw/

EDIT

$(function() {
    $('#submit').click(function(e) {
        e.preventDefault();
        $('input').each(function() {
            if($(this).hasClass('error')) {
                var firstError = $('.error:first');
                $('html,body').animate({scrollTop: firstError.offset().top}, 300);
                firstError.focus();   
            } 
        });
    });
});

http://jsfiddle.net/fExhw/1/ (hit the submit button at the bottom)

Ok updated it to what I think you’re after.