Как получить элемент для прокрутки в представлении, используя jQuery?

У меня есть документ HTML с изображениями в формате сетки с помощью <ul><li><img.... Окно браузера имеет вертикальную и горизонтальную прокрутку.

Вопрос: Когда я нажимаю на изображение <img>, как я могу заставить весь документ прокручиваться до позиции, где только что щелкнуло изображение, является top:20px; left:20px?

У меня есть просмотр здесь для похожих сообщений... хотя я совершенно новичок в JavaScript и хочу понять, как это достигается для меня.

Ответы

Ответ 1

Поскольку вы хотите знать, как это работает, я объясню его шаг за шагом.

Сначала вы хотите связать функцию как обработчик кликов изображения:

$('#someImage').click(function () {
    // Code to do scrolling happens here
});

Это применит обработчик кликов к изображению с помощью id="someImage". Если вы хотите сделать это со всеми изображениями, замените '#someImage' на 'img'.

Теперь для фактического кода прокрутки:

Получить смещения изображения (относительно документа):
```
var offset = $(this).offset(); // Contains .top and .left
```
Вычтите 20 из top и left:
```
offset.left -= 20;
offset.top -= 20;
```
Теперь анимируйте свойства CSS прокрутки и прокрутки слева от <body> и <html>:
```
$('html, body').animate({
    scrollTop: offset.top,
    scrollLeft: offset.left
});
```

Ответ 2

Там DOM-метод называется scrollIntoView, который поддерживается всеми основными браузерами, который выровняет элемент с верхним/левым (или как можно ближе).

$("#myImage")[0].scrollIntoView();

В поддерживаемых браузерах вы можете указать параметры:

$("#myImage")[0].scrollIntoView({
    behavior: "smooth", // or "auto" or "instant"
    block: "start" // or "end"
});

В качестве альтернативы, если все элементы имеют уникальные идентификаторы, вы можете просто изменить свойство hash объекта location для возврата/поддержка кнопок вперед:

$(document).delegate("img", function (e) {
    if (e.target.id)
        window.location.hash = e.target.id;
});

После этого просто настройте свойства scrollTop/scrollLeft на -20:

document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;

Ответ 3

Самое простое решение, которое я видел

$('html, body').animate({
    scrollTop: $("#target-element").offset().top
}, 1000);

Учебник здесь

Ответ 4

Посмотрите на jQuery.scrollTo плагин. Здесь demo.

В этом плагине есть много вариантов, которые выходят за рамки native scrollIntoView. Например, вы можете настроить плавность прокрутки, а затем установить обратный вызов для завершения прокрутки.

Вы также можете посмотреть все плагины JQuery с тегом "прокрутка" .

Ответ 5

Есть способы прокрутки элемента непосредственно в представлении, но если вы хотите прокрутить до относительного элемента относительно элемента, вам нужно сделать это вручную:

Внутри обработчика кликов найдите позицию элемента относительно документа, вычтите 20 и используйте window.scrollTo:

var pos = $(this).offset();
var top = pos.top - 20;
var left = pos.left - 20;
window.scrollTo((left < 0 ? 0 : left), (top < 0 ? 0 : top));

Ответ 6

Вот быстрый плагин jQuery для удобного отображения встроенных функций браузера:

$.fn.ensureVisible = function () { $(this).each(function () { $(this)[0].scrollIntoView(); }); };

...

$('.my-elements').ensureVisible();

Ответ 7

После проб и ошибок я придумал эту функцию, также работает с iframe.

function bringElIntoView(el) {    
    var elOffset = el.offset();
    var $window = $(window);
    var windowScrollBottom = $window.scrollTop() + $window.height();
    var scrollToPos = -1;
    if (elOffset.top < $window.scrollTop()) // element is hidden in the top
        scrollToPos = elOffset.top;
    else if (elOffset.top + el.height() > windowScrollBottom) // element is hidden in the bottom
        scrollToPos = $window.scrollTop() + (elOffset.top + el.height() - windowScrollBottom);
    if (scrollToPos !== -1)
        $('html, body').animate({ scrollTop: scrollToPos });
}

Ответ 8

Просто подсказка. Работает только с firefox

Element.scrollIntoView();

Ответ 9

Мой пользовательский интерфейс имеет вертикальный список прокрутки в палитре Цель состояла в том, чтобы сделать текущий большой палец в центре значка. Я начал с одобренного ответа, но обнаружил, что было несколько попыток по-настоящему сосредоточить текущий большой палец. надеюсь, что это поможет кому-то другому.

Разметка:

<ul id='thumbbar'>
    <li id='thumbbar-123'></li>
    <li id='thumbbar-124'></li>
    <li id='thumbbar-125'></li>
</ul>

JQuery

// scroll the current thumb bar thumb into view
heightbar   = $('#thumbbar').height();
heightthumb = $('#thumbbar-' + pageid).height();
offsetbar   = $('#thumbbar').scrollTop();


$('#thumbbar').animate({
    scrollTop: offsetthumb.top - heightbar / 2 - offsetbar - 20
});

Ответ 10

Простые 2 шага для прокрутки вниз до конца или вниз.

Шаг 1: получите полную высоту прокручиваемого (разговорного) div.

Шаг 2: примените scrollTop к этому прокручиваемому элементу (диалогу), используя значение, полученное на шаге 1.

var fullHeight = $('#conversation')[0].scrollHeight;

$('#conversation').scrollTop(fullHeight);

Вышеуказанные шаги должны быть применены к каждому добавлению в div разговора.

Ответ 11

После попытки найти решение, которое обрабатывало бы каждое обстоятельство (варианты анимации прокрутки, отступа вокруг объекта, как только он прокручивается в поле зрения, работает даже в неясных обстоятельствах, таких как в iframe), я наконец-то написал свое собственное решение для этого. Поскольку кажется, что это работает, когда многие другие решения потерпели неудачу, я решил поделиться этим:

function scrollIntoViewIfNeeded($target, options) {

    var options = options ? options : {},
    $win = $($target[0].ownerDocument.defaultView), //get the window object of the $target, don't use "window" because the element could possibly be in a different iframe than the one calling the function
    $container = options.$container ? options.$container : $win,        
    padding = options.padding ? options.padding : 20,
    elemTop = $target.offset().top,
    elemHeight = $target.outerHeight(),
    containerTop = $container.scrollTop(),
    //Everything past this point is used only to get the container visible height, which is needed to do this accurately
    containerHeight = $container.outerHeight(),
    winTop = $win.scrollTop(),
    winBot = winTop + $win.height(),
    containerVisibleTop = containerTop < winTop ? winTop : containerTop,
    containerVisibleBottom = containerTop + containerHeight > winBot ? winBot : containerTop + containerHeight,
    containerVisibleHeight = containerVisibleBottom - containerVisibleTop;

    if (elemTop < containerTop) {
        //scroll up
        if (options.instant) {
            $container.scrollTop(elemTop - padding);
        } else {
            $container.animate({scrollTop: elemTop - padding}, options.animationOptions);
        }
    } else if (elemTop + elemHeight > containerTop + containerVisibleHeight) {
        //scroll down
        if (options.instant) {
            $container.scrollTop(elemTop + elemHeight - containerVisibleHeight + padding);
        } else {
            $container.animate({scrollTop: elemTop + elemHeight - containerVisibleHeight + padding}, options.animationOptions);
        }
    }
}

$target - это объект jQuery, содержащий объект, который вы хотите прокрутить, если необходимо.

options (необязательно) могут содержать следующие параметры, передаваемые в объекте:

options.$container - объект jQuery, указывающий на содержащий элемент $ target (другими словами, на элемент в dom с полосами прокрутки). По умолчанию используется окно, которое содержит элемент $ target и достаточно умное, чтобы выбрать окно iframe. Не забудьте указать $ в имени свойства.

options.padding - отступ в пикселях для добавления над или под объектом, когда он прокручивается в поле зрения. Таким образом, это не прямо на краю окна. По умолчанию 20.

options.instant - если задано значение true, jQuery animate не будет использоваться, и прокрутка мгновенно откроется в нужном месте. По умолчанию false.

options.animationOptions - любые параметры jQuery, которые вы хотите передать в функцию анимирования jQuery (см. http://api.jquery.com/animate/). При этом вы можете изменить продолжительность анимации или запустить функцию обратного вызова после завершения прокрутки. Это работает, только если для options.instant установлено значение false. Если вам нужна мгновенная анимация, но с обратным вызовом, установите options.animationOptions.duration = 0 вместо использования options.instant = true.