将元素滚动到溢出的父容器的顶部

Question

出于某种原因，我觉得这应该很容易，但我无法让它工作，而且我似乎无法在网上找到解决方案。

我有一个容器 (#container) 设置为溢出：滚动。里面是3个div，它们都和父容器有相同的高度（100%）。这些 div 中的每一个都包含一个 link.

假设您向下滚动到第二个 div 的一半，然后您应该能够单击第二个 div 中的 link，这将触发parent div 向上滚动到容器的顶部。

这是我的代码：

HTML

<div id="container">
    <div>
      <a href="#">link 1</a>
    </div>

    <div>
      <a href="#">link 2</a>
    </div>

    <div>
      <a href="#">link 3</a>
    </div>
</div>

CSS

#container {
    position: absolute;
    height: 100%;
    overflow: scroll;
}

div {
    height: 100%;
    width: 100%;
}

jQuery

$("a").click(function() {
    // triggers parent div to scroll up to the parent container
});

我设法使用 scrollTop 滚动到 div，但没有将 div 与父容器对齐。

我希望这是有道理的。感谢您的帮助。

编辑：

根据下面 pilar1347 的回答，这里有一个 Fiddle 代码在运行：https://jsfiddle.net/julienfrog/w2oqsqc8/2/

Answer 1

查看您的问题示例（ArcaneCraeda 建议的 jsfiddle）会很有帮助，但是 scrollTop(0) 是您要查找的内容吗？

在你的jQuery中：

$("a").click(function(){
    $("#container").scrollTop(0);
});

单击 link 时，这应该会滚动到 #container div 的顶部。

但是，如果您正在寻找的是让所选 div 捕捉到 #container 的顶部，那么您可能需要这样的东西：

$("a").click(function(){
    var clicked_idx = $(this).parent().index();
    var div_height = $(this).parent().height();
    var scroll_to = clicked_idx * div_height;

    $("#container").scrollTop(scroll_to);
})

注意：仅当所有 child div 的高度相同时才有效。

将元素滚动到溢出的父容器的顶部

Scroll element to the top of an overflowed parent container

jquery

onclick

scrolltop