jquery x animazione scrolltop e su div specifico

[medorex]

Ciao belli, sulla mia pagina utilizzo gia

$(document).ready(function(){
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},1100);
        return false;
    });
});

per far tornare in cima una pagina con una piccola animazione, se volessi implementarlo in maniera tale che ci sia la stessa animazione per arrivare in un div con id specifico cliccando su un link a href... che devo fare che non riesco a farlo funzionare?
grazie a tutti
Medo

[lucavizzi]

Devi animare non a zero ma alla posizione del div con id specifico, posizione che è data da:

$('#id_del_tuo_elemento').offset().top

Esempio:

$(document).ready(function(){
    $('.scrollToX').click(function(){
        $('html, body').animate({scrollTop : $('#id_del_tuo_elemento').offset().top},1100);
        return false;
    });
});

Una implementazione potrebbe essere:

<script type="text/javascript">
$(document).ready(function(){
    $('.goToID').click(function(){
        var target=$(this).attr('href');
        $('html, body').animate({scrollTop : $(target).offset().top},1100);
        return false;
    });
 });
</script>

<p>paragraph</p>
<p id="paragraphX">paragraph</p>
<p>paragraph</p>
<p id="paragraphY">paragraph</p>
<p>paragraph</p>


<a href="#paragraphX" class="goToID">Vai al praragrafo X</a><br>
<a href="#paragraphY" class="goToID">Vai al praragrafo Y</a>

[medorex]

M I T I C O
Grazie mi ero fossilizato a mantenere l' animazione a 0, tacci sua se c' era il pulsante "grazie" o mettevo !

[lucavizzi]

Volendo si potrebbe evitare di assegnare la classe "goToID" ai link, associando l'evento ai link con attributo href che inizia per "#":

<script type="text/javascript">
$(document).ready(function(){
    $('a[href^="#"]').click(function(){
        var target=$(this).attr('href');
        $('html, body').animate({scrollTop : $(target).offset().top},1100);
        return false;
    });
 });
</script>

<p>paragraph</p>
<p id="paragraphX">paragraph</p>
<p>paragraph</p>
<p id="paragraphY">paragraph</p>
<p>paragraph</p>


<a href="#paragraphX">Vai al praragrafo X</a><br>
<a href="#paragraphY">Vai al praragrafo Y</a>