Элемент прокрутки в виде прокручиваемого контейнера

У меня есть прокручивающийся контейнер с жесткой кодировкой:

.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 неверно, поскольку оно похоже на получение смещения от верхней части страницы, где я надеялся получить значение смещения на основе его положения в контейнере прокрутки.

Любая помощь ценится!

Ответ 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()
    });
});

Ответ 2

Вот живой пример: http://jsfiddle.net/LqQGR/12/

Вы хотите установить scrollTop в позицию элемента (расстояние между верхней частью контейнера и ссылкой) плюс текущий scrollTop (расстояние между верхней частью содержимого и текущим местом, которое оно видимо.

Кроме того: вам нужно установить ваш scrollingContainer в position: relative, чтобы смещать родительский элемент внутри.

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