如何将页面滚动到手风琴内容的中心？答案

【问题标题】：how to scroll page to the center of accordion content?如何将页面滚动到手风琴内容的中心？
【发布时间】：2014-04-17 05:32:53
【问题描述】：

使用 Zurb's Foundation 5 中的手风琴时，当应用“活动”类显示内容时，它会使滚动条跳动。这会导致视频显示部分截断。我想滚动窗口，使“活动” div 位于视口的中心。这样，在手风琴中导航时，视频始终居中。非常感谢任何建议和帮助。 http://rmaguns.com/shoot-guns.html 的示例。一直滚动到最后一个手风琴（爆炸目标）并单击它。当它打开时，它显示视频部分被切断。任何关于如何在视口中居中视频的建议都会让我很开心！

【问题讨论】：

标签： jquery html scrollbar zurb-foundation accordion

【解决方案1】：

我做了一些研究，您也许可以将其调整到工作中。您需要将其放入您的 :

jQuery(document).ready(function() {

jQuery('.active').click(function() {
    var viewportWidth = jQuery(window).width(),
        viewportHeight = jQuery(window).height(),
        $foo = jQuery('#foo'),
        elWidth = $foo.width(),
        elHeight = $foo.height(),
        elOffset = $foo.offset();
    jQuery(window)
        .scrollTop(elOffset.top + (elHeight/2) - (viewportHeight/2))
        .scrollLeft(elOffset.left + (elWidth/2) - (viewportWidth/2));
});

});

【讨论】：