javascript - css 动画移动页面 - 使用 css 修复当前元素上的页面滚动位置？

Question

给定以下简化问题：

foreach i in 1..100 do
    <div onclick="$("div").attr('class','expand');">block i</div>

这个CSS：

div {
    height: 20px;
    transition: height 0.5s;
}

div.expand {
    height: 50px;
}

现在，当我单击一个 div 时，每个 div 都会得到“扩展”类。这意味着页面将展开。但是，一切都会向下滚动。这意味着如果我单击 div 50，它可能不再出现在我的窗口中，我必须向下滚动才能再次看到它。

我想让我点击的 div 留在屏幕的中心。这可以通过 CSS 实现，还是我需要 JS？

Answer 1

该函数根据鼠标点击的位置滚动页面：

$(document).ready(function(){
    $('div').click(function(e){
        var offsetY = e.pageY -  $(window).scrollTop();
        $('div').attr('class','expand');
        $(window).scrollTop($(this).offset().top-offsetY);
    });
});

jsFiddle上的示例

Answer 2

有可能......你可以.scrollTop()像这样使用jQuery的方法：

$(window).scrollTop( $('.your_element').offset().top + $('.your_element').height() - $(window).height() );