Webmaster Forum / HTML, CSS, Scripts / JavaScript / September 2005

Try what
  var listItem = document.getElementById(ListItemId);
  if (listItem && listItem.scrollIntoView) {
    listItem.scrollIntoView(true);
  }
achieves, I am not sure at the moment what happens when that element the
method is called on sits in a scrollable container but it might do what
you want.
Please report back in the group whether the above does what you want.

If the above approach does not help (as it might scroll the whole
document and perhaps your movie out of view) then you can certainly
scroll the div by script e.g. if you have a variable with the div
element then you can set
  divElement.scrollTop = numberValue;
to scroll the element.

[...]

Try to do it without using an anchor and actually scroll the div.  Some
useful pointers to scrollTop:

<URL:http://www.mozilla.org/docs/dom/domref/scrollTop.html#Example>

To find the distance from the top of the div to your anchor, use the
stuff here:

<URL:http://www.quirksmode.org/js/findpos.html>

Or just try this:

<script type="text/javascript">

function scrollTo( eID, dID )
{
  var e = document.getElementById(eID);
  var d = document.getElementById(dID);
  d.scrollTop = getTop(e) - getTop(d) - 16;
}

// From quirksmode
function getTop(el)
{
  var curtop = 0;
  if (el.offsetParent) {
    while (el.offsetParent) {
      curtop += el.offsetTop
      el = el.offsetParent;
    }
  } else if (el.y) {
    curtop += el.y;
  }
  return curtop;
}
</script>

 <span style="cursor: pointer; text-decoration: underline;"
   onclick="scrollTo('link-01','sDiv');">Lorem
   ipsum</span><br>
 <span style="cursor: pointer; text-decoration: underline;"
   onclick="scrollTo('link-02','sDiv');">Nulla
   facilisi</span>

<div id="sDiv" style="position: absolute; height: 10em;
  width: 20em; overflow: scroll; top: 100px; left: 20px;
  border: 1px solid blue;">

  <p><span id="link-01"><b>Lorem ipsum</b></span> dolor sit amet,
    consectetuer adipiscing elit. Suspendisse nisl. Sed ut magna quis
    metus imperdiet feugiat. Aliquam erat volutpat. Aenean tincidunt
    elit non ante mattis tincidunt. Vivamus vitae mauris vitae augue
    ultricies viverra. Class aptent taciti sociosqu ad litora torquent
    per conubia nostra, per inceptos hymenaeos. Duis convallis.</p>

 <p>Quisque porta, massa eget malesuada euismod, justo velit hendrerit
    neque, sit amet sodales orci dolor ut magna. Nullam blandit, metus
    et varius dignissim, lorem ipsum feugiat velit, ut vehicula orci
    nibh eu neque. Praesent lacinia, libero quis congue commodo, ante
    nulla pulvinar nunc, quis mattis augue lacus vitae nisi.</p>

 <p><span id="link-02"><b>Nulla facilisi.</b></span> Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Nullam at ipsum id libero
    imperdiet tempor. Ut leo. Suspendisse quis sem sed mi varius
    vehicula. Nulla erat. Nullam lacinia, augue at posuere tempor, enim
    magna aliquam pede, quis dapibus lacus nunc ut lacus.</p>

 <p>Suspendisse volutpat sodales justo. Class aptent taciti sociosqu ad
    litora torquent per conubia nostra, per inceptos hymenaeos. Duis
    quis sapien. Quisque sem enim, ultrices ut, faucibus id, condimentum
    in, ligula. Nam lobortis nunc sit amet lectus. Pellentesque eu ante
    nec quam vulputate pharetra. Vestibulum tristique vehicula
    lectus</p></div>

[...]