2

ページ上部に固定メニューを使用するサイトがあります。

リンクがクリックされると、垂直方向にスクロールして、そのターゲット 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);
}
4

2 に答える 2

0

最終的にそれを理解しました。数学が苦手なだけだった。固定ヘッダーとフッターのオフセットも、すべての解像度で機能します。

    // 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);
}
于 2012-06-05T03:10:32.237 に答える
-1

私は簡単なjqueryをしました。それがあなたが探しているものの助けになるかもしれないと思います。

デモをご覧ください

ターゲットdivは垂直に中央オフセット ヘッダーのままです。

于 2012-06-05T00:33:48.383 に答える