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!

Here's a fiddle. Does it demonstrate the issue? It seems to work. http://jsfiddle.net/isherwood/LqQGR — isherwood, Nov 20 '13 at 16:36
Yes, the problem being that I'm not really controlling what position it scrolls to. Also if I click twice it scrolls twice rather than sticking to the previously scrolled to position. — CLiown, Nov 20 '13 at 16:38

isherwood · Answer 1 · 2020-01-08T16:19:18.703

50

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

edited Jan 08 '20 at 16:19

answered Nov 20 '13 at 17:32

isherwood

46,000
15
100
132

score 3 · Answer 2 · edited Jan 08 '20 at 16:18

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

Scroll element into view in scrollable container

2 Answers2