Scroll element into view in scrollable container

Question

I have a scrolling container with a hard coded height:

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

This scrolling container contains a list of items, when I click on the item I want to scroll the container so that the item clicked is at the top of the scrolling container.

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

Above is what I have currently, I'm having trouble with the mathematical calculation I need to perform. Also I think the var offset value is incorrect as it seems to be getting the offset from the top of the page where I was hoping to get the offset value based on it's position in the scrolling container.

Any help appreciated!

Answer 1

A variation of this answer does the trick:

var myContainer = $('.scrollingContainer')

$(myContainer).on('click', 'a', function () {
  var scrollTo = $(this);

  myContainer.animate({
    scrollTop: scrollTo.offset().top - myContainer.offset().top + myContainer.scrollTop()
  });
});

Fiddle demo

Answer 2

Here's a live example: http://jsfiddle.net/LqQGR/12/

You want to set your scrollTop to the element's position (the distance between the top of the container and the link) plus the current scrollTop (the distance between the top of the contained content and the current place it's visible.

Also: you need to set your scrollingContainer to position: relative so that it's the offset parent of the content within.

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

By the way, my answer is superior to one in which you add click event listeners to all anchor tags individually. This only adds one listener, which is more performant. Read more about delegated events