Scrolling to an Element within a Div

You aim to program a scrolled div to automatically scroll to an element within it upon clicking. Utilizing scrollIntoView(true) seems to scroll the entire page, leaving you puzzled.

Solution:

To address this issue, you need to determine the top offset of the target element relative to its parent, the scrolling div container. This is achieved through:

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

The topPos now contains the pixel distance between the div's top and the element you want visible.

Next, instruct the div to scroll to that location using scrollTop:

document.getElementById('scrolling_div').scrollTop = topPos;

In Prototype JS, this translates to:

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

This action scrolls the div to align the specified element at the top, or as close as possible if scrolling doesn't permit reaching the top.