Выделите центр просмотра

Ответ 1

В некотором роде вы должны идентифицировать элементы, которые можно использовать для кликов. Я создаю пример, который использует атрибут class для этого.

Шаг 1

Это script, который выполняет работу:

$('html,body').animate({
    scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2
}, 200);

То, что вы пробовали, - это прокрутить контейнер до верхней части страницы. Вы также должны рассчитать и вычесть разницу между высотой контейнера и высотой видового экрана. Разделите это на два (так как вы хотите иметь одно и то же пространство сверху и снизу, и вы готовы к работе.

Шаг 2

Затем вы добавляете обработчик кликов ко всем элементам:

$(document).ready(function () {
    $('.image').click( function() {
        $('html,body').animate({ scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2  }, 200);
    });
});

Шаг 3

Настройте некоторый HTML/CSS:

<style>

    div.image {

        border:     1px solid red;
        height:     500px;
        width:      500px;
    }

</style>

<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>

И все готово.

Проверьте демонстрацию

Попробуйте сами http://jsfiddle.net/insertusernamehere/3T9Py/

Ответ 2

У меня есть одна небольшая модификация; если "корректирующий коэффициент" (т.е. ($(window).height() - $(this).outerHeight(true))/2) 0 вы можете получить нежелательные результаты, в результате чего вы пропустите этот элемент в окне просмотра с помощью прокрутки. Я добавил max (0, корректирующий коэффициент), чтобы исправить:

function scrollIntoView(el) {

    var offsetTop = $j(el).offset().top;
    var adjustment = Math.max(0,( $j(window).height() - $j(el).outerHeight(true) ) / 2);
    var scrollTop = offsetTop - adjustment;

    $j('html,body').animate({
        scrollTop: scrollTop
    }, 200);
}

Ответ 3

HTMLElement.prototype.scrollToCenter = function(){
    window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
}

Достигнут чистый JavaScript для прокрутки в центр в вертикальном направлении. И это похоже на горизонтальное направление. Я не учитываю высоту элементов, потому что они могут быть больше высоты экрана.