Question

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

我有一个容器（#container）设置为溢出：滚动。里面是3个div，它们都具有与父容器相同的高度（100％）。这些div中的每一个都包含一个链接。

让我们说你向下滚动并在第二个div的中途，你应该能够点击第二个div中的链接，这将触发父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的回答，这里有一个代码在行动的小提琴：https://jsfiddle.net/julienfrog/w2oqsqc8/2/

Answer 1

看一个你的问题的例子（ArcaneCraeda建议的jsfiddle）会很有帮助，但是你正在寻找的是scrollTop（0）吗？

你的jQuery中的

：

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

单击链接时，这应滚动到#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);
})

注意：这仅适用于所有子div的高度相同的情况。

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

1 个答案: