Как прокручивать элемент в jQuery?

Я сделал следующий код в JavaScript, чтобы сосредоточиться на конкретном элементе (branch1 - это элемент),

document.location.href="#branch1";

Но поскольку я также использую jQuery в своем веб-приложении, поэтому я хочу сделать вышеуказанный код в jQuery. Я пробовал, но не знаю, почему он не работает,

$("#branch1").focus();

Вышеупомянутый код jquery (focus()) не работает для div, тогда как если я пытаюсь использовать тот же код с текстовым полем, то его рабочий,

Скажите, пожалуйста, как я могу сосредоточиться на элементе div с помощью jQuery?

Спасибо!

ОТВЕТЫ

Ответ 1

Отметьте jQuery.ScrollTo, я думаю, что поведение, которое вы хотите, проверьте demo.

Ответ 2

Для моей проблемы этот код работал, мне пришлось перейти к привязному тегу при загрузке страницы:

$(window).scrollTop($('a#captchaAnchor').position().top);

В этом случае вы можете использовать это для любого элемента, а не только для привязывающего тега.

Ответ 3

Подобно @user293153 Я только что открыл этот вопрос, и на него, похоже, не ответили правильно.

Его ответ был лучшим. Но вы также можете анимировать элемент.

$('html, body').animate({ scrollTop: $("#some_element").offset().top }, 500);

Ответ 4

Вы можете расширить функции jQuery следующим образом:

jQuery.fn.extend({
scrollToMe: function () {
    var x = jQuery(this).offset().top - 100;
    jQuery('html,body').animate({scrollTop: x}, 500);
}});

а затем:

$('...').scrollToMe();

easy; -)

Ответ 5

Отметьте jquery-scrollintoview.

ScrollTo отлично, но часто вы просто хотите убедиться, что элемент пользовательского интерфейса виден, а не обязательно вверху. ScrollTo не поможет вам в этом. Из scrollintoview README:

Как этот плагин решает проблему с пользователем

Этот плагин прокручивает определенный элемент в виде, аналогичном браузеру встроенная функциональность (функция DOM scrollIntoView()), но работает по-разному (и, возможно, более удобным для пользователя):

  • он только прокручивает элемент, когда элемент фактически не отображается; если элемент находится в поле зрения (в любом месте видимой области документа), без прокрутки будет выполняться;
  • он прокручивает анимационные эффекты; когда прокрутка выполняется, пользователи точно знают, что они не перенаправлены нигде, но на самом деле видят что они просто перемещаются в другое место на одной странице (также как в каком направлении они двигались);
  • всегда применяется минимальное количество прокрутки; когда элемент находится над областью видимого документа, он будет прокручиваться до верхняя часть видимой области; когда элемент находится ниже видимого, это будет прокручивается до нижней части видимой области; это самый последовательный способ прокрутки - когда прокрутка всегда будет поверх нее иногда не удалось прокрутить элемент вверх, когда он был близок к нижней части прокручиваемый контейнер (таким образом, прокрутка будет непредсказуемой);
  • Когда размер элемента превышает размер видимой области документа, его верхний левый угол - тот, который будет прокручиваться до:

Ответ 6

Используйте

$(window).scrollTop()

Он прокрутит окно к элементу.

 var scrollPos =  $("#branch1").offset().top;
 $(window).scrollTop(scrollPos);

Ответ 7

Я думаю, что вы можете искать "якорь" с учетом вашего примера.

<a href="#jump">This link will jump to the anchor named jump</a>
<a name="jump">This is where the link will jump to</a>

Метод jQuery фокусировки делает что-то отличное от того, что вы пытаетесь достичь.

Ответ 8

Для того чтобы функция focus() работала над элементом, div должен иметь атрибут tabindex. Это, вероятно, не выполняется по умолчанию для этого типа элемента, поскольку это не поле ввода. Вы можете добавить tabindex, например, в -1, чтобы пользователи, использующие вкладку, не фокусировались на нем. Если вы используете положительный tabindex, пользователи смогут использовать вкладку, чтобы сфокусироваться на элементе div.

Вот пример: http://jsfiddle.net/klodder/gFPQL/

Однако tabindex не поддерживается в Safari.