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

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

document.location.href="#branch1";

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

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

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

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

спасибо!

8 67
javascript focus html jquery

8 ответов:

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

32

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

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

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

108

Как @user293153 я только что обнаружил этот вопрос, и он, казалось, не был правильно ответил.

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

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

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

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

и затем:

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

легко ;-)

37

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

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

как этот плагин решит проблему.

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

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

использовать

$(Окно).scrollTop()

Он будет прокручивать окно чтобы пункт.

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

Я думаю, что вы могли бы искать "якоря" приведенный пример у вас есть.

<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 делает что-то отличное от того, что вы пытаетесь достичь.

1

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

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

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

0