स्क्रॉल तत्व स्क्रॉल कंटेनर में

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