How can I scroll to a DIV's child element consistently across browsers?

Question

I have a test case here:

http://www.libsys.und.edu/dev/scroll-test.html

It has a DIV containing a very long list of links. I want to scroll the DIV down to a given link. In my test case, that's done by pressing the JSTOR button, which advances it to the JSTOR link. In an actual production sample, the link would be chosen based on keyboard input. So, for example, pressing "B" would advance it to the first "B" link, Biological Abstracts.

The expected results in my test case are: I click JSTOR, and it scrolls so JSTOR is at the top of the DIV. That might involve scrolling down or up, depending on how far the DIV has been scrolled already.

The actual results depend on whether the DIV has already been scrolled at all.

If the DIV has not been scrolled at all, then it works correctly in all browsers.

If the DIV has been scrolled already (even a little bit), the results are as follows:

1. Firefox scrolls down and places JSTOR at the bottom of the DIV.
2. Chrome scrolls down and places JSTOR at the bottom of the DIV. (but see below)
3. Safari scrolls down and places JSTOR at the bottom of the DIV. (but see below)
4. Chrome scrolls down and places JSTOR at the bottom of the DIV.
5. Opera scrolls down and places JSTOR at the top of the DIV.

Additionally, under some circumstances that I have not been able to satisfactorily identify, both Chrome and Safari will scroll down and place the JSTOR link centered vertically in the middle of the DIV.

Opera is the only browser that consistently does what I was expecting. Firefox and IE do it differently, but at least do it consistently differently, and their behavior matches one another; I don't know what to make of Chrome and Safari's behavior.

So -- is there some way to scroll the DIV in such a way that the targeted link always winds up in the same position relative to its parent across browsers? I don't even care if it's at the top, really, though that makes the most sense to me. As long as I can get it to work the same way consistently, I'll be happy.

For the long-term record, here's my CSS and JS; the HTML is just a really long list of links inside a DIV with the ID "box". I tried to make a JS Fiddle out of this, but it died on me -- I think it didn't like the length of the HTML source.

CSS:

#box {
    width: 300px;
    height: 200px;
    overflow: auto;
    position: relative;
}

#box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

JS:

// I'm running scrollTop() and position().top through Math.floor() because
// Firefox likes reporting fractional values for pixels, for some reason.
function reportOffsets(){
    var offset = Math.floor($("#box").scrollTop());
    var position = Math.floor($("#jstor").position().top);
    $("#counter").html(offset+"px; J "+position+"px");
}

$(document).ready(function(){
    // When the box scrolls, tell me its current offset and where JSTOR is.
    $("#box").scroll(reportOffsets);

    $("#go").click(function(e){
        // Get the current position of the JSTOR link.
        var position = Math.floor($("#jstor").position().top);

        // Scroll the box down to it.
        $("#box").scrollTop(position);

        $("#jstor").focus();

        reportOffsets();
    });

    reportOffsets();
});

Answer 1

The DOM method scrollIntoView() should be exactly what you want. There is an optional alignWithTop parameter which defaults to true . If you use false (as in the Demo ) the element aligns with the bottom instead.

Answer 2

Use an anchor. // extra junk for SO

Edit

Below is an anchor based solution so show what I was talking about. The original post was a bit brief. It doesn't work in IE for some reason, it just doesn't see the anchor. So the scrollIntoView solution is best as it seems to work back to IE 6 at least.

Pass the element to scroll to to inPageNav . It puts an anchor immediately before it in the DOM, then adds an anchor name to the URL to go there. Inserting an anchor has no effect on the page layout.

The function only creates one anchor and moves it to the required location each time so quite efficient. But not as good as scrollIntoView .

var inPageNav = (function() {

  // Store the anchor
  var anchor;
  var anchorHref;

  return function(el) {

    var anchorName;

    // Create an anchor if don't already have one
    if (!anchor) {
      anchor = document.createElement('a');
      anchorName = 'foo' + (new Date().getTime()); 
      anchor.name = anchorName;
      anchorHref = document.location.href.replace(/#.*/,'') +  
                                             '#' + anchorName;
    }

    // Move anchor and go there
    el.parentNode.insertBefore(anchor, el);
    document.location.href = anchorHref;
  }
}());