elemento di scorrimento in vista in un contenitore scorrevole

Question

ho un contenitore di scorrimento con un'altezza hard coded:

.scrollingContainer { 
    overflow: scroll; 
    height: 400px; 
} 

Questo contenitore scorrimento contiene un elenco di voci, quando si fa clic sulla voce che voglio far scorrere il contenitore in modo che l'elemento cliccato si trova nella parte superiore del contenitore a scorrimento.

$('.scrollingContainer li a').click(function(event) { 
    var vpHeight = $('.scrollingContainer').height(); 
    var offset = $(this).offset(); 
    $('.scrollingContainer').animate({ 
    scrollTop: vpHeight - offset.top 
    }, 500); 
}); 

Sopra è quello che ho attualmente, ho problemi con il calcolo matematico che devo eseguire. Inoltre, penso che il valore var offset non sia corretto in quanto sembra ottenere l'offset dalla parte superiore della pagina in cui speravo di ottenere il valore di offset in base alla sua posizione nel contenitore a scorrimento.

Qualsiasi aiuto apprezzato!

Answer 1

Ecco un esempio: http://jsfiddle.net/LqQGR/12/

Si desidera impostare lo scrollTop alla posizione del elemento (la distanza tra la parte superiore del contenitore e il link) più la corrente scrollTop (la distanza tra la parte superiore il conteneva contenuti e il luogo corrente e 'visibile

anche:.. è necessario impostare la vostra scrollingContainer a position: relative in modo che sia l'offset parent del contenuto all'interno

var $scrollingContainer = $('.scrollingContainer'); 

$scrollingContainer.on('click', 'a', function (event) { 
    var vpHeight = $scrollingContainer.height(); 
    var scrollTop = $scrollingContainer.scrollTop(); 
    var link = $(event.currentTarget); 
    var position = link.position(); 

    $('.scrollingContainer').animate({ 
     scrollTop: (position.top + scrollTop) 
    }, 500); 
}); 

Answer 2

Una variante del this answer fa il trucco:

http://jsfiddle.net/isherwood/LqQGR/14

var myContainer = $('.scrollingContainer') 

$(myContainer).on('click', 'a', function() { 
    var scrollTo = $(this); 
    myContainer.animate({ 
     scrollTop: scrollTo.offset().top - myContainer.offset().top + myContainer.scrollTop() 
    }); 
});