jQuery animate scrollTop

Question

Tengo bastantes etiquetas section en un div con un desbordamiento establecido en hidden. El código es a lo largo de las líneas de esto:

<div id="viewport"> 
    <section> 
     content 
    </section> 
    <section> 
     content 
    </section> 
</div> 

lo tengo configurado como esto porque quiero ser capaz de desplazarse por la sections contenida dentro de la div cuando el enlace correspondiente se presiona en el menú. Tengo esta función:

$('#mn a').click(function(){ 
    var aHref = $(this).attr("href"); 
    var sectionHeight = $('section'+aHref+'').height(); 
    $('#viewport').height(sectionHeight); 
}); 

que utilizo para cambiar el tamaño de las #viewport div porque el sections son diferentes tamaños. Cuando trato de poner esta parte de desplazamiento en esa función:

$('body,html').animate({scrollTop: $(aHref).offset().top}, 800); 

hace que la página entera se desplace. Cuando trato de reemplazar $('body,html') con $('section, #viewport'), se desplaza dentro del div, pero no lo hace correctamente.

Tengo un ejemplo en vivo de este here. Supongo que tiene algo que ver con .offset() o con lo que estoy pasando en el .animate(), pero he intentado bastantes cosas diferentes pero fue en vano. ¿Puede alguien señalarme en la dirección correcta o decirme qué he hecho mal?

Answer 1

El problema es cómo position() obras, devuelve la parte superior/altura en relación con scrollTop.

Si lo solicita al hacer clic en $('section'+aHref+'').position().top, la posición devuelta se modifica desde el valor scrollTop.

Puede obtener toda la posición de altura en el evento listo. (Por lo scrollTop es 0)

o se puede desinfectar valores de posición con:

$("section#skills").position().top + $("#viewport").scrollTop() 

Answer 2

En primer lugar, debe evitar el comportamiento predeterminado del delimitador para desplazar la página al principio de la página. Puede hacerlo llamando al método preventDefault() en el objeto de evento dentro del controlador de eventos click. Prueba este

$('#mn a').click(function(e){ 
    e.preventDefault(); 

    var aHref = $(this).attr("href"); 
    var top = $('section'+aHref+'').position().top; 
    $('#viewport').animate({scrollTop: top}, 800); 
}); 

Answer 3

Si quieres un simple plugin de jQuery para hacer esto, entonces usted puede probar (AnimateScroll) que soporta actualmente más de 30 estilos de flexibilización también