スクロール要素

Question

私はハードコード化された高さとスクロールコンテナを持っています。

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

私はそうコンテナをスクロールしたい項目をクリックすると、このスクロールコンテナは、アイテムのリストが含まれていますクリックされたアイテムがスクロールしているコンテナの上部にあることを示します。

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

上記は私が現在行っていることですが、私は実行する必要がある数学的計算に問題があります。また、私はvar offset値が間違っていると思うので、スクロールしているコンテナの位置に基づいてオフセット値を取得することを望んでいたページの上部からオフセットを取得しているようです。

Answer 1

ここでは実際の例です：http://jsfiddle.net/LqQGR/12/

あなたは、要素の位置（コンテナの上端とリンクの間の距離） にあなたのscrollTopスプライトを設定したい

プラス現在のscrollTopスプライト（の頂​​部との間の距離はコンテンツを含んでおり、現在のところは、それが目に見えるのです。また

：。。あなたはそれが内のコンテンツのoffset parentだそうことposition: relativeにごscrollingContainerを設定する必要が

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

this answerの変動は、トリックを行います。

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() 
    }); 
});