将元素滚动到可滚动容器中的视图中

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

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

Answer 2

以下是一个实例：http://jsfiddle.net/LqQGR/12/

您想要将scrollTop设置为元素的位置（容器顶部与链接之间的距离）加上当前的scrollTop（顶部之间的距离< / em>内容和当前可见的地方。

另外：您需要将scrollingContainer设置为position: relative，以便它是内容的offset parent。

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

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

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