2010-12-30 18 views
30

Quindi questo è il codice corrente che hoscrollTop jquery, scorrendo a div con id?

$(document).ready(function() { 
    $('.abouta').click(function(){ 
     $('html, body').animate({scrollTop:308}, 'slow'); 
     return false; 
    }); 
    $('.portfolioa').click(function(){ 
     $('html, body').animate({scrollTop:708}, 'slow'); 
     return false; 
    }); 
    $('.contacta').click(function(){ 
     $('html, body').animate({scrollTop:1108}, 'slow'); 
     return false; 
    }); 
}); 

Quando si fa clic su un collegamento per esempio 'abouta' scorre fino a quella sezione specifica della pagina. Preferisco fare una scrollTo e quindi l'id di un div in modo che non debba continuare a cambiare la posizione di scrollTo se cambio padding ecc. Esiste un modo? Grazie

risposta

95

invece di

$('html, body').animate({scrollTop:xxx}, 'slow'); 

uso

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

questo ritornerà la prima posizione assoluta di qualsiasi elemento selezionato come #div_id

+1

funziona perfettamente, applausi: D – Jake

+3

Sono sorpreso che nessuno ha commentato così a lungo - la questione così com'è, chiede davvero '.offset()' piuttosto che '.position()' come soluzione, giusto? Il div di destinazione potrebbe essere in qualsiasi punto della pagina, e '.position()' [restituisce l'offset superiore rispetto alla sua casella contenitore] (http://api.jquery.com/position/). Quindi il codice sopra ti porterà all'inizio del tuo documento, se il target div è un primo figlio del suo genitore. O mi sta sfuggendo qualcosa? – sameers

+0

Grazie Sameers, questo è esattamente il problema che stavo avendo. .offset() funziona a meraviglia. – Dan382

-2

se si desidera scorrere solo solo alcuni div , puoi utilizzare l'ID div anziché "html, body"

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

uso

$('#mydivid').animate(... 
+3

No, '$ ('# div'). Animate ({scrollTop: $ ('# div'). Position(). Top}, 'slow');' non funziona. (Chrome 23). Meglio usare '$ ('html, body'). Animate ({scrollTop: $ ('# div_id'). Position(). Top}, 'slow');' – bicycle

0

provare questo:

$('html, body').animate({scrollTop:$('#xxx').position().top}, 'slow'); 
$('#xxx').focus(); 
-2

provare questo

$('#div_id').animate({scrollTop:0}, '500', 'swing');