scrollTop all'interno di un div non funziona in jQuery

Question

voglio animare scrolltop con in un div quando ho animare corpo scorrere sta lavorando bene per me

Ma quando Io lo utilizzo con un div è fallisce.

Questo raffinato sta lavorando per me http://jsfiddle.net/yazaLyxs/

$('body').animate({ 
    scrollTop: $('#myId').offset().top 
}, 'slow'); 

Allora perché questo codice non funziona?

$('.myClass').animate({ 
    scrollTop: $('#myId').offset().top 
}, 'slow'); 

http://jsfiddle.net/qVWuv/198/

Answer 1

OK dal momento che nessuno ha risposto esattamente su ciò che è tutta una questione:

.position().top non prende in considerazione il margine di un elemento.jsFiddle demo

---

Il tuo primo esempio potrebbe funzionare in Chrome, ma non in Firefox, causa delle lievi differenze nelle documentElement.

Per tenere conto di essa si dovrà utilizzare:

$('html, body').animate({ 

Ora, diamo un'occhiata alla differenza tra i metodi .position() e .offset():

.position()

ottenere la corrente coordinate del primo elemento nel set di elementi abbinati, relativi al genitore di offset.

.offset()

ottenere le coordinate correnti del primo elemento, o impostare le coordinate di ogni elemento, nella serie di elementi accoppiati, relativi al documento.

se quanto precede è chiaro, e si desidera ottenere la posizione elemento interno childall'interno di un genitore posizionato ^*, è necessario utilizzare .position().

#parent { 
    height: 300px; 
    background: teal; 
    margin: 500px 0 0 0; 
    overflow:scroll; 
    position:relative; /* NEEDED! */ 
} 

Ora, si potrebbe avere impostato il margine elemento del interiore per 500px ma è top posizione è ancora 0 px!

console.log($('#child').position().top); // 0 

Pertanto è necessario impostare uno stile top: (invece di margin) e position: all'elemento #save al fine di utilizzare $('#child').position().top: http://jsfiddle.net/RokoCB/qVWuv/203/(o almeno mettere alcuni altri elementi prima di esso o alcuni contenuti).

_{* Se non si imposta una "posizione:" proprietà CSS per l'elemento principale è necessario sottrarre prima posizione del genitore o di offset.}

Answer 2

se in html

<div class="myClass"> 
    <label></label> 
    <label id="myId">target Label</label> 
</div> 

in css

div{ 
    height: 100px; 
    width: 100px; 
    overflow: auto; 
} 

in js

$('.myClass').animate({ 
    scrollTop: $('#myId').position().top 
}, 'slow'); 

tutto dovrebbe funzionare .. Jsfiddle

Answer 3

$('body').animate({ 
    scrollTop: $('#myId').position().top 
}, 'slow'); 

Questa lavorando bene becauase si imposta div alla margin-top: 500px; che fanno scorrere verticalmente l'immagine sul corpo.

Quindi è necessario un elemento DOM che abbia un'altezza sufficiente per ottenere uno scorrimento verticale, si noti che questo elemento non è l'elemento di destinazione, ovvero il tag che contiene il div.

Scegli questa Jsfiddle Demo