how to make container scroll to element

containers, javascript, jquery, scroll

Solution

Try using this:

var pOffset = $("#lipsum").scrollTop();
pOffset = pOffset + $("#lipsum p.active").position().top;

`.scrollTop()` gives the current scroll position of the DIV, add the position of the P element to it and scrolling will be fine.

Problem

I've got a container with a whole bunch of text in it and i want to auto-scroll to various elements in that container. I can animate the container using jQuery to scroll a certain distance nicely, however I am having a lot of trouble determining what that distance is. Most of the hints I see recommend using the .offset().top property to get that distance, but that isn't working in this case. Have a look at this jsfiddle for an example. NOTE: the fiddle targets paragraph tags that are direct children of the container, but I don't want to rely on that. I want to be able to get the proper scroll distance for any elements, no matter how deeply nested they may be.

Original source