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

Question

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

document.location.href="#branch1";

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

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

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

Скажите, пожалуйста, как я могу сфокусироваться на элементе div, используя jQuery?

Спасибо!

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

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

и затем:

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

легкий; -)

Answer 4

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

Answer 5

Проверить jquery-scrollintoview .

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

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

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

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

Answer 6

Использование

$ (окно) .scrollTop ()

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

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

Answer 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>

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

Answer 8

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

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

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