javascript - 在带有溢出-y :scroll 的固定元素内使用 scrollTop

当我的内容位于指定了 overflow-y: scroll 的固定位置容器内时，我似乎无法让 scrolltop 工作。

这是我的相关代码:

/* some container with many large content blocks inside */
#container {
    position: fixed;
    width: 300px;
    height: 300px;
    overflow-y: scroll;
}

/* button that has a data-path attribute that specifies where the container should scroll to*/
$(".button").on("click", function(){
    var path = $(this).attr("data-path");
    var anchor = $("#" + path);
    var position = anchor.position().top;
    $("#container").animate({scrollTop: position});
});

我相信这个 fiddle 很好地说明了我的困境:http://jsfiddle.net/Qndu5/

如果您从上向下滚动到一个元素，效果很好。在那之后，所有赌注都取消了。它完全无法从顶部以外的任何位置滚动。它要么严重错过标记，要么一直滚动到顶部，即使输入的位置值看起来是正确的。

当然我在这里遗漏了一些东西，但我不确定我不明白什么。感谢您提供的任何帮助!

最佳答案

您缺少的是计算位置时的 scrollTop，因此如果 View 已经滚动，则需要将其添加到计算中 var position = anchor.position().top + $("#container").scrollTop();
http://jsfiddle.net/x36Rm/

关于javascript - 在带有溢出-y :scroll 的固定元素内使用 scrollTop，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23144191/