Scrollare verso un'istanza di classe

[Axior]

Salve a tutti!

Sto facendo un sito per un corso di web (studio graphic design),
il sito funziona perfettamente, eccetto che per una cosa:

sul sito ci sono diverse polaroid, una sotto l'altra, quando clicco sul testo sulla polaroid mi appaiono sotto i contenuti, spostando ovviamente verso il basso quelli restanti, e così via.

Il problema è che cambiando i contenuti della pagina, questa si ingrandisce e mi ritrovo che il browser avrà scrollato su un posto a caso, quando voglio invece che, una volta che clicco sull'elemento e mi mostra sotto il contenuto, la pagina scrolli verso il contenuto.

Sono riuscito a fare tutto solo con classi e istanze di queste, codici jquery compresi, rendendo il codice il più semplice e breve possibile, non vorrei dover sostituire tutto con degli ID, e sicuramente non è questo il caso.

La parte di codice interessata è questa

<script type="text/javascript">
var posizionescroll;
$('.polaroid_scritta').click(function() {
$('.riga_polaroid:not(:hover) .polaroid_scritta').removeClass('attivo');
$('.riga_polaroid:not(:hover) .contenuto').hide('fast');
$('.riga_polaroid:hover .polaroid_scritta').addClass('attivo');
$('.riga_polaroid:hover .contenuto').show('slow');
if ($('.riga_polaroid .polaroid_scritta').hasClass('attivo')) {
posizionescroll=$('.riga_polaroid .polaroid_scritta').scrollTop();
}
$('html, body').animate({
scrollTop: posizionescroll+600
}, 1000);
</script>


In pratica mi serve un modo per identificare una particolare istanza con la classe "attivo", prenderne l'altezza nella pagina dopo che è avvenuto lo "show" e spostare lì lo scroll.

Ho provato anche con il codice

$('html, body').animate({
scrollTop: $('.riga_polaroid .polaroid_scritta').offset().top + 600
}, 1000);



Ma il problema è lo stesso, non funziona, si va a posizionare sempre solo dopo la prima istanza di classe (cioè la prima polaroid), ma se apro la terza o la quarta, per esempio, mi torna sempre alla prima.

Grazie per chiunque mi risponda!!!!

[Xinod]

ma questi selettori :hover, :not(:hover) mi sembrano un po' azzardati

se gli elementi con cui interagire sono legati all' elemento scatenante l' evento raggiungili con i metodi di traversing, partendo da $(this)

ciao

[Axior]

Quei selettori li ha scritti il prof.

In pratica funziona così:

Se clicco ho ovviamente il mouse su quel div, così contemporaneamente analizza tutte le istanze di quella classe che non hanno l'hover e le priva della classe "attivo", fa l'inverso per l'unica su cui sarà verificato l'hover, poi mostra il contenuto.

Ho usato questo codice

$('.polaroid_scritta').click(function() {

$('.riga_polaroid:not(:hover) .polaroid_scritta').removeClass('attivo');
$('.riga_polaroid:not(:hover) .contenuto').hide('fast');
$('.riga_polaroid:hover .polaroid_scritta').addClass('attivo');
$('.riga_polaroid:hover .contenuto').show('slow');
$('html, body').animate({
scrollTop: $(this).offset().top + 100
}, 1000);
});



Ma niente, ho sempre il solito problema:
Quando clicco su una polaroid che ha contenuti molto grandi, come ad esempio dei video con 100% width, mi scrolla da solo molto più in basso, usando il codice fa lo stesso, perchè in pratica lui va ad allinearsi con quella che era la posizione del div PRIMA di fare lo show e mostrare i contenuti, difatti se riclicco sulla stessa polaroid una volta aperta funziona perfettamente.

[Xinod]

in pratica al posto di (o oltre a) quell' arbitrario 100 devi aggiungere l' altezza dell' elemento nascosto, se e' nascosto ( http://api.jquery.com/hidden-selector/ )

se non sai quanto spazio occupa questo contenuto prima o poi devi rilevarlo (a elemento visibile) e qui hai varie tecniche a seconda del caso:
a mali estremi cambi il positioning di questo contenuto, lo spingi di tantissimo fuori dalla visuale, lo "mostri", rilevi le dimensioni, lo nascondi di nuovo e lo risetti a position static

ma appunto, magari nel tuo caso e' gia' tutto li', o puoi coprire tutto fino al completo caricamento e settarti in un http://api.jquery.com/data/ l' altezza del contenuto prima di nasconderlo etc etc etc

ciao