Вопрос по jquery, javascript, html – jQuery scrollTo - Центр Div в окне по вертикали

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);
}
яthink Вы должны выровнять div с прокруткой по верху окна, если у вас есть div с высотой, большей, чем у окна браузера, его верхняя часть не будет обрезана. Если вы не уверены, что все div'ы = 400px. Fabrício Matté
Было бы неплохо, если бы вы могли опубликовать живую демонстрацию вашей разметки вjsfiddle.net для тестирования, а также. Fabrício Matté

Ваш Ответ

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);
}
-1

Я сделал простой jquery. Я думаю, что это может помочь тому, что вы ищете.

Посмотри пожалуйстадемонстрация

Цельdiv оставайтесь вертикально по центру заголовка смещения.

Это меняет поле div, мне нужно на самом деле прокрутить до div, так как страница содержит множество div. jwg2s

Похожие вопросы