Javascript 使用overflow-y:滚动将元素定位在可见视口窗口的中心

我大致构建了这个网站，它使用类似于iOS Safari选项卡视图的效果来查看虚拟书的各个页面。除了我不能在可见视口中居中每页之外，一切都很好。例如，如果向下滚动到最后一个“页面”并单击它，它将跳到文档顶部，而不是停留在可见视口的中心

我认为这与可滚动div使用overflow-y:scroll这一事实有关，但我就是不知道如何解决这个问题

任何帮助都将不胜感激

以下是我的jQuery：

jQuery(document.body).on('click', '.page', function() { //Change to touchstart

// Generate number between 1 + 2
var randomClass = 3;
var randomNumber = Math.round(Math.random() * (randomClass - 1)) + 1;

// Initialise & Random Number
jQuery(this).addClass("activated").addClass('scaled-' + randomNumber);

// Exiting - Reset All
jQuery(document.body).on('click', '.activated', function() { //Change to Touchstart
  jQuery(this).removeClass("activated scaled-1 scaled-2 scaled-3");
});
});

这是一个JSFIDLE，其中包含了我的所有代码，因此您可以更好地了解我要实现的目标

---

谢谢

您需要获得

#wrapper

已滚动的金额，以便您可以使用该金额相应地设置

.page

的

顶部。然后，当您删除
.activated
类时，您只需要删除内联
top
样式

jQuery(document.body).on('click', '.page', function() { 
    var randomClass = 3;
    var randomNumber = Math.round(Math.random() * (randomClass - 1)) + 1;
    jQuery(this).addClass("activated").addClass('scaled-' + randomNumber);

    var wrapper_scrollTop = $("#wrapper").scrollTop(); //gets amount scrolled
    var half_wrapper = $("#wrapper").height()*(0.5); //50% of wrapper height
    jQuery(this).css("top",half_wrapper+wrapper_scrollTop);

    jQuery(document.body).on('click', '.activated', function() { 
        jQuery(this).removeClass("activated scaled-1 scaled-2 scaled-3");
        jQuery(this).css("top","") //returns top to original value specified in css
    });
});

查看此工作小提琴：
尝试从激活的
中删除
顶部的
值。。。你好@DanielPinzon，谢谢你的反馈！从激活的页面中删除顶部值是可行的，但是如果你点击其中一个“页面”，而它在窗口中的位置不完全，那么它会在可见窗口外显示一半（如果有意义的话）？