jQuery scrollTo - 窗口中垂直居中的 Div答案

【问题标题】：jQuery scrollTo - Center Div in Window VerticallyjQuery scrollTo - 窗口中垂直居中的 Div
【发布时间】：2012-06-09 00:55:21
【问题描述】：

我有一个在页面顶部使用固定菜单的网站。

点击链接时，它应该垂直滚动，以便目标 div 的中心与窗口的垂直中心对齐，偏移标题的高度。 - 这一点非常重要，这样无论显示器的分辨率如何，div 都会居中

我正在使用 jQuery 和 scrollTo，但无法计算出所需的数学运算。

这是我的尝试：

function scrollTo(target) {
var offset;
var scrollSpeed = 600;

if (viewport()["width"] > 767 && !jQuery.browser.mobile) {
    // Offset anchor location and offset navigation bar if navigation is fixed
    offset = $(target).offset().top - document.getElementById('navigation').clientHeight;
} else {
    // Offset anchor location only since navigation bar is now static
    offset = $(target).offset().top;
}

    $('html, body').animate({scrollTop:offset}, scrollSpeed);
}

【问题讨论】：

我认为你应该将滚动到的 div 对齐到窗口的顶部，如果你有一个高度大于浏览器窗口的 div，它的顶部就赢了不要被切断。除非你确定所有的 div 都是
如果您也可以在 jsfiddle.net 中发布您的标记的现场演示以进行测试，那就太好了。

标签： javascript jquery html scroll center

【解决方案1】：

我做了一个简单的jquery。我认为这可能对您正在寻找的内容有所帮助。

请看demo

目标div 保持垂直居中偏移标头。

【讨论】：

这会改变 div 的边距，我需要实际滚动到 div，因为页面包含许多 div。

【解决方案2】：

终于想通了。只是在数学上很愚蠢。固定页眉和页脚的偏移量也适用于所有分辨率。

    // scrollTo: Smooth scrolls to target id
function scrollTo(target) {
    var offset;
    var scrollSpeed = 600;
        var wheight = $(window).height();
        //var targetname = target;
        //var windowheight = $(window).height();
        //var pagecenterH = windowheight/2;
        //var targetheight = document.getElementById(targetname).offsetHeight;

    if (viewport()["width"] > 767 && !jQuery.browser.mobile) {
        // Offset anchor location and offset navigation bar if navigation is fixed
        //offset = $(target).offset().top - document.getElementById('navigation').clientHeight;
                offset = $(target).offset().top - $(window).height() / 2 + document.getElementById('navigation').clientHeight + document.getElementById('footer').clientHeight;
    } else {
        // Offset anchor location only since navigation bar is now static
        offset = $(target).offset().top;
    }

    $('html, body').animate({scrollTop:offset}, scrollSpeed);
}

【讨论】：