jquery scorrere fino alla posizione div specifica in caso di errore e messa a fuoco

Question

Ho un div nascosto con messaggi di errore specifici nel mio modulo. Prima di inviare il modulo, eseguo una routine di convalida per verificare se tutti i campi obbligatori sono riempiti con del testo. In caso contrario, un div con la classe 'redAlert' diventa visibile proprio sopra il campo di testo. Voglio anche che la finestra di dialogo scorra verso destra in questa posizione quando vengono visualizzati i messaggi di errore. So che ci sono molti plugin disponibili per farlo, ma voglio farlo usando un semplice Jquery. Sto cercando di A) Trova il primo div visibile con la classe redAlert, b) Trova la sua posizione chiamando il .offset() su questo div e poi c) chiamando .scroll() sull'oggetto window ma non sto ottenendo questo lavorare. Fammi sapere se mi manca qualcosa del tutto o la mia sintassi non è valida (mi sono spesso trovato a dover lottare con l'errore di sintassi con Jquery). Di seguito è il mio codice. Inoltre, questo trova solo il div visibile (supponendo che ci sia solo un errore div alla volta), puoi per favore fornirmi il selettore per trovare il primo div visibile con una particolare classe.

var errorDiv = $('.redAlert:visible').attr("id"); 
var scrollPos = $("#"+errorDiv).offset(); 
//alert(scrollPosition); // This alert always says 'null', why ? 
$(window).scroll(scrollPos); 
//Also tried scrollTo(); 

Grazie molto in anticipo.

Answer 1

var errorDiv = $('.redAlert:visible').first(); 
var scrollPos = errorDiv.offset().top; 
$(window).scrollTop(scrollPos); 

Demo:http://jsfiddle.net/Cjuve/2/

Answer 2

non credo che la sua gonna lavoro fuori.

Guardate il codice che ho lasciato alle spalle

$('html, body').animate({ 
    scrollTop: ($('.error').first().offset().top) 
},500);