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

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/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（所包含内容的顶部和当前可见位置之间的距离。

另外：您需要设置您的scrollingContainer，position: relative以便它是其中内容的偏移父级。

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

顺便说一句，我的答案优于将点击事件侦听器单独添加到所有锚标记的答案。这只增加了一个监听器，性能更高。了解有关委托事件的更多信息