如何在浏览器中一致滚动到DIV的子元素？

Question

我在这里有一个测试用例:

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

它有一个包含很长链接列表的DIV.我想将DIV滚动到给定的链接.在我的测试用例中,通过按下JSTOR按钮完成,将按钮推进到JSTOR链接.在实际生产样本中,将基于键盘输入选择链接.因此,例如,按"B"将其推进到第一个"B"链接,即生物学文摘.

我的测试用例中的预期结果是:我单击JSTOR,它滚动,因此JSTOR位于DIV的顶部.这可能涉及向下或向上滚动,具体取决于DIV已经滚动了多远.

实际结果取决于DIV是否已经滚动.

如果DIV根本没有滚动,那么它在所有浏览器中都能正常工作.

如果DIV已经滚动(甚至一点点),结果如下:

1. Firefox向下滚动并将JSTOR放在DIV 的底部.
2. Chrome向下滚动并将JSTOR放在DIV 的底部.(但见下文)
3. Safari向下滚动并将JSTOR放在DIV 的底部.(但见下文)
4. Chrome向下滚动并将JSTOR放在DIV 的底部.
5. Opera向下滚动并将JSTOR放在DIV 的顶部.

此外,在某些我无法令人满意地识别的情况下,Chrome和Safari都会向下滚动并将JSTOR链接垂直居中放置在DIV 的中间.

Opera是唯一能够始终如一地实现我期望的浏览器.Firefox和IE以不同的方式做到这一点,但至少以不同的方式做到这一点,并且他们的行为相互匹配; 我不知道Chrome和Safari的行为是什么.

那么 - 是否有某种方式可以滚动DIV,使得目标链接总是在浏览器中相对于其父级位于相同的位置？我甚至不关心它是否在顶部,真的,尽管这对我来说最有意义.只要我能以一致的方式让它以同样的方式工作,我会很高兴.

对于长期记录,这是我的CSS和JS; HTML只是一个很长的DIV内部链接列表,ID为"box".我试图制作一个JS Fiddle,但它死在我身上 - 我认为它不喜欢HTML源代码的长度.

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

DOM方法scrollIntoView()应该正是您想要的.默认情况下有一个可选的alignWithTop参数true.如果您使用false(如在演示中),则元素与底部对齐.